宝塔面板活动

守望轩Wordpress小程序修改记录——专题页代码修改

首先感谢一下守望轩的Jianbo大佬开源的Wordpress小程序,还有叶赫先生的WordPress版微信小程序 2.0 重构版

从17年开始接触小程序后一直在弄以微擎为后台的一些小程序(以后我也会更新一些关于以微擎为后台的小程序),后来在无意间在折腾Wordpress的时候在Github找到了这个项目,于是就开始折腾,首先是更改了一些界面上的东西,用的是原作者Jianbo的守望轩小程序,页面修改大部分根据叶赫先生的WordPress版微信小程序 2.0 重构版

这是一个开源的程序,我会在这几天更新一些关于我折腾的记录,分享给大家一起折腾 (・∀・(・∀・(・∀・*)

首先是最简单的专题页面,其实小程序的页面的wxml和样式wxss和普通的html和css样式差不多,只要你熟悉这两样东西改起来没什么大问题

只要修改topic.wxml And topic.wxss文件即可,大家在微信开发者工具里面去根据模拟器去调整一下样式

下面是我的小程序专题页面代码

wxss部分

.container {
  height: 100%;
    /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;   */
}
.topic-container{
  background-color: #fff;
}


/*topic list*/

.topic-common-list {
   padding: 24rpx; 
   margin: 0 auto;
}

.list-item {
  position: relative;
  float: left;
  /* border-bottom: 1px solid #eee; */
  overflow: hidden;
  /* clear: both;  */
  width: 100%;
   /* border: 1px solid #ccc; */
  border-radius: 8rpx;  
  margin-bottom: 60rpx;
  background: #fff;
  box-shadow:2rpx 2rpx 30rpx rgba(0, 0, 0, .2);

}

.list-item  image.cover {
  width: 100%;
  height: 340rpx;
  /* border-radius: 6rpx; */
}

.content-title {
  padding: 12rpx 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-title text {
  font-size: 30rpx;
  line-height: 30rpx;
  font-weight: bold;
  color: #1b1b1b;
}

.content-brief {
  padding: 0rpx 0rpx 30rpx 20rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #959595;
}
.topic-name {
 float: left; 
 width: 55%;
}
.topic-img {
    float: right;
    text-align: right;
    width: 40%;
    margin-right: 10rpx;
    padding-top: 10rpx;
}

.img-menu {
  width: 80rpx;
  height: 40rpx;
  display: inline-block;
  text-align: center;
   border-radius: 6rpx;
}

 

wxml部分

<import src="../../templates/copyright.wxml" />
<import src="../../templates/login-popup.wxml" />

<scroll-view style="height:100%;" scroll-y="true" lower-threshold="100rpx">
    <view class="topic-common-list">
        <block wx:key="id" wx:for="{{categoriesList}}">
            <view class="list-item">
                <view>
                    <image src="{{item.category_thumbnail_image}}" class="cover" data-item="{{item.name}}" data-id="{{item.id}}" bindtap="redictIndex"></image>
                </view>
                <view class="content-title" data-item="{{item.name}}" data-id="{{item.id}}" bindtap="redictIndex">
                    <view class="topic-name">
                        <text>{{item.name}}</text>
                    </view>
                    <view class="topic-img">
                        <image src="../../images/{{item.subimg}}" data-subflag="{{item.subflag}}" data-id="{{item.id}}" catchtap="postsub" class="img-menu"></image>
                    </view>
                </view>
                <view class="content-brief" data-item="{{item.name}}" data-id="{{item.id}}">
                    <text>{{item.description}}</text>
                </view>
            </view>
        </block>
    </view>
</scroll-view>
 <template is="login-popup" data="{{show: isLoginPopup, userInfo: userInfo}}"></template>
     
<view class="copyright" style="display:{{floatDisplay}}">
    <template is="tempCopyright" />
</view>

 

下面是附件可以直接替换文件使用

END!拜拜ヾ(•ω•`)o

此资源下载价格为5元,请先
提示:此非实物交易,购买后不退款,请考虑好再购买

Madapang

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

相关推荐

11 条评论

  1. 我的页面的样式也很赞,求大佬分享经验

  2. 文章页面和关于页面,分享一下呗

    • 尽快写,多关注哦(ง ˙o˙)ว

  3. 您好,我想把首页文章变成像你专题这种大图显示,能写篇教程吗?谢谢!适当付点费也可以,拜托了?

    • 这几天有点忙,有空会写的

  4. 我微信 jie9876543

  5. 设计的很漂亮,支持

  6. 博主棒棒~~~

发表评论

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

微信扫一扫

微信扫一扫

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

守望轩Wordpress小程序修改记录——专题页代码修改
返回顶部

显示

推荐使用快捷登录:

忘记密码?

显示

显示

获取验证码

Close