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

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

小程序 0 3.3K
守望轩小程序修改

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

图文样式更改为大图模式

我们需要找到小程序页面路径 templates/common-list.wxml

替换以下代码

源代码

<template name="tempCommonList">

  <view class="common-list">
    <block wx:key="id" wx:for="{{postsList}}">
      <view class="list-item has-img" index="{{index}}" id="{{item.id}}" bindtap="redictDetail">
        <view class="content-title">
          <text>{{item.title.rendered}}</text>
        </view>
        <view class="content-date">
          <image src="../../images/calendar.png"></image>
          <text>{{item.date}}</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>
        <image src="{{item.post_medium_image}}" mode="aspectFill" class="cover"></image>
      </view>
    </block>
  </view>  
</template>

替换后

<template name="tempCommonList">

  <view class="common-list">
    <block wx:key="id" wx:for="{{postsList}}">

        <view bindtap="" style="position:relative">
          <form bindsubmit="pushFormSubmit"  report-submit='true'>
          <button style='-webkit-transform: scale(0.5);transform:scale(1);content:"";height:100%; width: 100%;border:1px solid transparent;background-color:transparent; position: absolute; top: 0; left: 0' plain="true"  formType="submit"></button>
              <view class="list-item has-img w-100" index="{{index}}" id="{{item.id}}" bindtap="redictDetail">
                <view style='margin-bottom:24rpx;'>
                  <image src="{{item.post_thumbnail_image}}" mode="aspectFill" class='cover-100'></image>
                </view>
                <view class="content-title content-title-100">
                  <text>{{item.title.rendered}}</text>
                </view>

                <view class="content-title content-title-100" style='margin-top:0;margin-bottom:0'>
                  <text style='font-size:26rpx;color:#959595;margin:32rpx auto;'>{{item.excerpt.rendered}}</text>
                </view>

                <view class="content-date" style='margin-right:0;'>

                    <view style='float:left;'>
                        <block wx:if="{{item.category_name !=null}}">
                                <text style='color:#333333'>{{item.category_name}}</text>
                        </block>
                    </view>

                    <view style='float:right;'>
                        <image src="../../images/calendar.png"></image>
                        <text>{{item.date}}</text>

                        <image src="../../images/pageviews.png"></image>
                        <text class="">{{item.pageviews}}</text>

                        <image src="../../images/comments.png"></image>
                        <text class="">{{item.total_comments}}</text>

                        <image src="../../images/home-like.png"></image>
                        <text style='margin-right:10rpx'>{{item.like_count}}</text>
                    </view>
                </view>

              </view>
          </form>
        </view>
    </block>
  </view>  
</template>

接下来打开根目录路径找到app.wxss

修改替换以下代码

第13行的.container

源代码

.container {
  padding: 0 24rpx;
  background-color: #fff;
  font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}

替换后

.container {
  padding: 0 24rpx;
  background-color: #fff;
  font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}

.container2 {
  padding: 0;
  background-color: #fff;
  font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}

第73行到第130行代码替换

源代码

.common-list {
  margin-bottom: 24rpx;
}

.common-list .list-item {
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 24rpx;
  min-height: 150rpx;
  overflow: hidden;
}

.common-list .list-item.has-img image.cover {
  position: absolute;
  left: 0rpx;
  top: 24rpx;
  width: 200rpx;
  height: 150rpx;
   border-radius: 8rpx;
}

.common-list .list-item.has-img .content-title {
  margin-left: 200rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
}

.common-list .list-item.has-img .content-title text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 30rpx;
  line-height: 1.4;
  font-weight: 400;
  color: #3a4040;
}

.common-list .list-item.has-img .content-date {
  margin-left: 200rpx;
}

.common-list .list-item.has-img .content-date image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
  vertical-align: middle;
}

.common-list .list-item .content-date text {
  color: #959595;
  margin-right: 32rpx;
  font-size: 20rpx;
  line-height: 1.2;
  font-weight: normal;
}

替换后

.common-list {
  margin-bottom: 24rpx;
}

.common-list .list-item {
  position: relative;
  padding: 40rpx 24rpx;
  margin: 10rpx 24rpx 60rpx;
  min-height: 200rpx;
  overflow: hidden;
  box-shadow: 2rpx 2rpx 30rpx rgba(0, 0, 0, .2);
  border-radius: 8rpx;
}

.common-list .list-item.has-img.w-100 {
  height:auto;
}

.common-list .list-item.has-img image.cover {
  position: absolute;
  right: 24rpx;
  top: 0rpx;
  width: 200rpx;
  height: 200rpx;
  border-radius:3px;
}

.common-list .list-item.has-img image.cover-100 {
  width:100%;
  height:215px;
  border-radius: 6rpx;
}

.common-list .list-item.has-img .content-title {
  height: 80rpx;
  margin-bottom: 70rpx;
}

.common-list .list-item.has-img .content-title-100 {
  width:100%;
  margin-bottom:20rpx;
}

.common-list .list-item.has-img .content-title text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-transform: uppercase;
  font-size: 34rpx;
  line-height: 1.4;
  font-weight: 500;
  color: #000000;
}

.common-list .list-item.has-img .content-date {
  margin-right: 200rpx;
}

.common-list .list-item.has-img .content-date image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
  vertical-align: middle;
}

.common-list .list-item .content-date text {
  color: #959595;
  margin-right: 32rpx;
  font-size: 26rpx;
  line-height: 1.2;
  font-weight: normal;
}

※然后打开路径pages/index/index的index.wxml（如果不改这步有可能导致你的文章页样式和个人中心样式贴紧两边）

修改第21行和第22行代码

源代码

<view class="container">

替换后

<view class="container1">

※然后打开路径pages/hot/hot的hot.wxml（排行榜样式）

修改代码

源代码

<view class="list-item has-img" index="{{index}}" id="{{item.post_id}}" bindtap="redictDetail">
  <view class="content-title">
    <text>{{item.post_title}}</text>
  </view>
   <view class="content-date">
     <image src="../../images/calendar.png"></image>
     <text>{{item.post_date}}</text>
     <image src="../../images/comments.png"></image>
     <text class="">{{item.comment_total}}</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>
     <image src="{{item.post_thumbnail_image}}" class="cover"></image>
</view>

替换后

<view class="list-item has-img" index="{{index}}" id="{{item.post_id}}" bindtap="redictDetail" style='margin:0;padding:30rpx;box-shadow:none;border-bottom:2rpx solid #eee;'>
  <view class="content-title" style='margin-right:200rpx;'>
    <text>{{item.post_title}}</text>
  </view>
  <view class="content-date">
     <image src="../../images/calendar.png"></image>
     <text>{{item.post_date}}</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>
     <image src="{{item.post_thumbnail_image}}" mode="aspectFill" class="cover" style='top:24rpx;'></image>
</view>

首页图文样式就搞定啦！

下面是效果图

首页代码修改 首页代码修改 首页代码修改
如果在小程序里面看代码费劲，可以直接访问本文连接“原文链接”在浏览器里面打开，进行复制更改

 

END拜拜ヾ(•ω•`)o

上一篇 守望轩Wordpress小程序修改记录——首页代码修改-1
下一篇 小白入门基础傻瓜式操作PHP面板安装使用——Bt宝塔面板

相关文章

发表回复

后才能评论