<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> |
.topic-summary { font-size: 12px; position: absolute; bottom: 0; right: 10px; } |
// 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) }); } }) } }) |
模板简介:该模板名称为【微信小程序论坛图文列表页样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。