当前位置：
  1. 首页
  2. 技术分享
  3. 小程序
  4. 正文

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

小程序 0 4.0K 5
守望轩小程序修改

守望轩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整篇替换以下代码（其实不用整篇替换但是为了省事和保持其他页面样式整篇替换好一点）

由于这段太长 我打包上传了在附件里面

到了这一步已经可以显示出来了但是我们缺了两个图片，我会打包附件，下载后扔到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;
}

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

今天就到这了，转载请注明！！！

 

隐藏内容

此处内容需要权限查看

  • 普通5金币

END拜拜ヾ(•ω•`)o

上一篇 守望轩Wordpress小程序修改记录——个人中心代码修改-1
下一篇 微擎小程序 [精美企业公司官网小程序]

相关文章

发表回复

后才能评论