微信小程序论坛图文列表页样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="weui-panel__bd">
  <view wx:for="{{topics}}" wx:for-item="topic" wx:key="key" class="weui-media-box weui-media-box_appmsg">
    <view class="weui-media-box__hd">
      <image src="{{topic.author.avatar_url}}" class="weui-media-box__thumb"></image>
    </view>
    <view class="weui-media-box__bd">
      <view class="weui-media-box__title" hover="true" hover-class="title_hover" bindtap="showDetail" data-id="{{topic.id}}">{{topic.title}}
        <image style="width: 15px; height: 15px; background-color: #eeeeee;" wx:if="{{topic.top}}" src="/image/icon/top.png" title="置顶"></image>
        <image style="width: 15px; height: 15px; background-color: #eeeeee;" wx:if="{{topic.good}}" src="/image/icon/good.png" title="精华"></image>
      </view>
      <view class="weui-media-box__desc topic-summary">发布:{{topic.create_at_forread}} 分类: {{topic.tab}} 点击: {{topic.visit_count}} 回复:{{topic.reply_count}}</view>
    </view>
  </view>
</view>
<view class="weui-footer">2017 © NUTZ.CN</view>

二、wxss样式文件代码如下：

.topic-summary {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    right: 10px;
}

三、js页面代码如下：

// pages/topic/topic.js
Page({
  data:{
    topics:[],
    page:1,

  },
  onLoad:function(options){
    this.loadTopics();
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  onReachBottom:function(){
    this.setData({
      "page":this.data.page + 1
    });
    this.loadTopics();
  },
  showDetail:function(event){
    wx.navigateTo({
      url: '../topics/detail/detail?id=' + event.target.dataset.id
    })
  },
  loadTopics:function(){
    var that = this;
    var old = this.data.topics;
    // 页面初始化 options为页面跳转所带来的参数
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 10000
    })
    wx.request({
      url: 'https://nutz.cn/yvr/api/v1/topics', 
      data: {
        page: that.data.page 
      },
      success: function(res) {
        wx.hideToast();
        that.setData({
          'topics':old.concat(res.data.data)
        });
      }
    })
  }
})

模板简介：该模板名称为【微信小程序论坛图文列表页样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。