守望轩Wordpress小程序修改记录——首页代码修改-3

守望轩Wordpress小程序首页代码修改3

图文样式更改为时间轴样式

就是下面这个样子

好啦开始折腾

首先打开路径pages/index/index

找到index.wxml整篇替换一下代码

<import src="../../templates/common-list.wxml" />
<import src="../../templates/copyright.wxml" />

<view class="index-header" style="display:{{displaySwiper}}">
  <swiper class="index-swiper" indicator-dots="true" interval="10000" autoplay="true" indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="rgba(255, 255, 255, .7)">
    <block wx:key="id" wx:for="{{postsShowSwiperList}}">
      <swiper-item id="{{item.id}}" index="{{index}}" data-redicttype="{{item.type}}" data-appid="{{item.appid}}" data-url="{{item.url}}" bindtap="redictAppDetail">
        <image mode="aspectFill" src="{{item.post_medium_image}}" style="width:100%" />
        <view class="swiper-mask"></view>
        <view class="swiper-desc">
          <text>{{item.post_title}}</text>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

<view class="showerror" style="display:{{showerror}}">
  <image src="../../images/cry80.png" style="height:100rpx;width:100rpx"></image>
  <view class="errortext">
    暂时无法访问网络,下拉重试...

  </view>
</view>

<view style="display:{{showallDisplay}}">

  <view class="container" style="padding-top: 20rpx;">
        <view class="index-container">
            <template is="tempCommonList" data="{{postsList:postsList}}"></template>
            <view class="loadingmore" style="display:{{floatDisplay}}">
                <view class="no-more" hidden="{{!isLastPage}}">— 无更多文章 —</view>
            </view>
            <view class="copyright" style="display:{{floatDisplay}}">
                <template is="tempCopyright" data></template>
            </view>
        </view>
    </view>
</view>

然后打开index.wxss整篇替换一下代码

.container {
    padding: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAICAYAAACLUr1bAAAAAXNSR0IArs4c6QAAAChJREFUOBFjYKAyuHXr1n9qGslETcNoYdaoAykN1dEQHA1BSkOAUv0A4XADnO5zBEcAAAAASUVORK5CYII=) repeat-y top left;
}

.index-container {
    padding-top: 24rpx;
    background-color: #fff;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAICAYAAACLUr1bAAAAAXNSR0IArs4c6QAAAChJREFUOBFjYKAyuHXr1n9qGslETcNoYdaoAykN1dEQHA1BSkOAUv0A4XADnO5zBEcAAAAASUVORK5CYII=) repeat-y top left;
}

.index-header {
    text-align: center;
    font-weight: normal;
    font-size: 30rpx;
    line-height: 40rpx;
    color: #757575;
}

.swiper-box {
    position: absolute;
    z-index: 999;
    left: 0;
    width: 100%;
    height: 20rpx;
    top: 381rpx;
}

swiper.index-swiper {
    position: relative;
    height: 300rpx;
}

swiper .swiper-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
}

swiper image {
    display: block;
    width: 100%;
    height: 100%;
}

swiper .swiper-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(63,76,88,0.3)100%);
    color: #fff;
    line-height: 180rpx;
    margin: 0 auto;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 30rpx;
    text-shadow: 0px 0px 16px #646d75;
}

.search-button {
    border-left: 0!important;
    border-top: 1px solid #fff!important;
    border-right: 1px solid #fff!important;
    border-bottom: 1px solid #fff!important;
    background-color: #fff!important;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #296fd0!important;
    width: 20%;
    margin: 0!important;
    box-shadow: 1px 1px 6px #ecf0f0;
}

.search-button icon {
    position: absolute;
    margin: 28rpx 16rpx;
}

.search-input {
    background-color: #fff;
    padding: 16rpx 0 16rpx 32rpx;
    min-height: 1rem;
    font-size: 30rpx;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0!important;
    height: 48rpx;
    width: 80%;
    text-align: left;
    box-shadow: 1px 1px 6px #ecf0f0;
}

.share-button {
    border: 1px solid #eee!important;
    color: #296fd0!important;
    left: 10rpx;
    height: 100rpx;
    width: 200rpx;
}

.search-pancel {
    display: flex;
    flex-direction: row;
    background-color: #f5f7f7;
    padding: 24rpx 24rpx;
}

.search-pancel image {
    width: 50rpx;
    height: 50rpx;
    margin-left: 20rpx;
    vertical-align: middle;
}

.top-Nav {
    display: flex;
    padding: 25rpx 0;
    background: #fff;
    justify-content: space-around;
    border-bottom: 8px solid #E0E0E0;
}

.top-item {
    text-align: center;
    width: 24.9%;
}

.top-item image {
    width: 88rpx;
    height: 88rpx;
}

.top-item text {
    color: #666;
    line-height: 20rpx;
    font-size: 14px;
}

.share-button {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
}

然后打开路径templates/

打开common-list.wxml文件,整篇替换

<template name="tempCommonList">

    <view class="common-list">

        <view bindtap="redictDetail" class="list-item has-img" id="{{item.id}}" index="{{index}}" wx:for="{{postsList}}" wx:key="id">
            <view class="content-title">
                <image class="time_dot" src="../../images/time_dotm.png"></image>
                <text>{{item.title.rendered}}</text>
                <view class="content-day">
                    <text>{{item.date}}</text>
                </view>
            </view>

            <image class="cover" mode="widthFix" src="{{item.content_first_image}}"></image>

            <view class="content-box">
                <view class="content-date">
                    <text class="content-category">{{item.category_name}}</text>
                    <image src="../../images/comments.png"></image>
                    <text class="">{{item.total_comments}}</text>
                    <image src="../../images/pageviews.png"></image>
                    <text class="">{{item.pageviews}}</text>
                    <image src="../../images/home-like.png"></image>
                    <text class="">{{item.like_count}}</text>
                </view>
            </view>
        </view>

    </view>
    
</template>

接着打开根目录找到app.wxss整篇替换以下代码(其实不用整篇替换但是为了省事和保持其他页面样式整篇替换好一点)

由于这段太长 我打包上传了

点击下载app.wxss文件

到了这一步已经可以显示出来了但是我们缺了两个图片,我会打包附件,下载后扔到images文件夹下就可以

点击下载images

还没有完,我们需要调整一下其他页面的样式

1.(专题页list)

打开路径pages/list/list找到list.wxss

全篇替换代码

.container {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAICAYAAACLUr1bAAAAAXNSR0IArs4c6QAAAChJREFUOBFjYKAyuHXr1n9qGslETcNoYdaoAykN1dEQHA1BSkOAUv0A4XADnO5zBEcAAAAASUVORK5CYII=) repeat-y top left;
    padding: 0;
}

.list-header {
    padding: 50rpx 0;
    text-align: left;
    font-weight: normal;
    font-size: 40rpx;
    line-height: 40rpx;
    color: #21759b;
    border-bottom: 2rpx solid #ededed;
    margin-bottom: 48rpx;
}

.topic-common-list {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAICAYAAACLUr1bAAAAAXNSR0IArs4c6QAAAChJREFUOBFjYKAyuHXr1n9qGslETcNoYdaoAykN1dEQHA1BSkOAUv0A4XADnO5zBEcAAAAASUVORK5CYII=) repeat-y top left;
    margin-top: -4rpx;
}

.topic-list-item {
    position: relative;
    overflow: hidden;
    clear: both;
    background: #fff;
}

.topic-list-item image.cover {
    width: 100%;
    height: 382rpx;
}

.topic-content-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    z-index: 2;
    left: 40rpx;
    top: 220rpx;
}

.topic-content-title text {
    color: #FFF;
    font-weight: 200;
    font-size: 24rpx;
}

.title-box {
    background: rgba(0,0,0,0.6);
    padding: 20rpx 30rpx;
}

.topic-content-name {
    margin-bottom: 10rpx;
    display: inline-table;
    padding: 10rpx 16rpx;
    background: rgba(0,0,0,0.6);
}

.topic-content-name text {
    font-size: 40rpx;
    color: #fff;
    font-weight: 300;
}

.topic-content-brief {
    display: block;
    padding: 10rpx 16rpx;
    background: rgba(0,0,0,0.6);
    font-size: 24rpx;
    color: #fff;
    font-weight: 200;
}

.topic-content-title text.searchKey {
    text-indent: 16rpx;
    font-size: 40rpx;
    font-weight: 300;
}

然后再打开list.wxml替换以下代码

源代码

<view class="topic-common-list" style="display:{{isCategoryPage}}">
      <view class="topic-list-item">
        <image src="{{categoriesImage}}" class="cover">
        </image>
        <view class="topic-content-title">
          <text>{{categoriesList.name}}</text>
        </view>
        <view class="topic-content-title-line"></view>
        <view class="topic-content-brief">
          <text>{{categoriesList.description}}</text>
        </view>
      </view>
    </view>

替换后

    <view class="topic-common-list" style="display:{{isCategoryPage}}">
        <view class="topic-list-item">
            <view class="topic-content-title">
                <view class="topic-content-name">
                    <text>{{categoriesList.name}}</text>
                </view>
                <text class="topic-content-brief">{{categoriesList.description}}</text>
            </view>
            <image class="cover" mode="aspectFill" src="{{categoriesImage}}"></image>
        </view>
    </view>

接下来是热门排行页

找到路径pages/hot/hot打开hot.wxss

全篇替换

.container {
    padding: 100rpx 24rpx;
}

.common-list .list-item {
    padding: 0;
}

.common-list .list-item.has-img .content-title {
    padding: 30rpx 0 0 0;
}

.common-list .list-item.has-img .content-date {
    padding: 0 0 30rpx 0;
    border-bottom: 2rpx solid #EEE;
}

.common-list .list-item {
    padding-top: 24rpx;
}

.list-header {
    padding: 50rpx 0;
    text-align: left;
    font-weight: normal;
    font-size: 40rpx;
    line-height: 40rpx;
    color: #21759b;
    border-bottom: 2rpx solid #ededed;
    margin-bottom: 48rpx;
}

.topic-common-list {
    padding: 30rpx 30rpx;
}

.topic-list-item {
    position: relative;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    clear: both;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 30rpx;
    background: #fff;
}

.topic-list-item image.cover {
    width: 100%;
    height: 300rpx;
}

.topic-content-title {
    padding: 10rpx 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-content-title text {
    font-size: 36rpx;
    line-height: 36rpx;
    font-weight: bold;
    color: #121b23;
}

.topic-content-brief {
    padding: 0rpx 30rpx 30rpx;
    font-size: 32rpx;
    line-height: 40rpx;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #989ebb;
}

.searchKey {
    color: #121b23;
}

.top-bar {
    height: 100rpx;
    background: #fff;
    width: 94%;
    position: fixed;
    top: 0;
    z-index: 1;
    margin: 0 3%;
}

.top-bar-item {
  display: inline-block;
  background: #fff;
  width: 25%;
  color: #9babba;
  text-align: center;
  line-height: 100rpx;
  font-size: 30rpx;
}

.top-bar-item-Selected {
    border-bottom: 1px solid #ffda44;
    color: #ffda44;
}

然后就搞定了,因为代码比较多小程序打开比较慢,建议点击原文链接在网页打开

今天就到这了,转载请注明!!!

END拜拜ヾ(•ω•`)o


郑重提醒:下载前请必读《免责声明》

本站声明:本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持,分享目的仅限于学习和测试,一切商业行为与本站无关,下载后请在24小时内删除。请勿用于商业用途,如需商业使用请向官方购买授权,由于使用该资源引起的侵权行为与本站无关!如有侵权,请联系admin@madapang.xin及时删除!

Madapang

一个喜欢撸猫,听歌,玩小霸王,睡觉的人。

5 条评论

  1. 博主的代码特别棒~

    • 你的也特别棒(o゚v゚)ノ

  2. fengzhikuang

    博主,点击下载app.wxss文件,下载不了。

  3. fengzhikuang

    谢谢博主

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

守望轩Wordpress小程序修改记录——首页代码修改-3
返回顶部

显示

推荐使用快捷登录:

忘记密码?

显示

显示

获取验证码

Close