微信小程序系统消息评论展示页面设计教程下载

本文给大家带来的是微信小程序系统消息评论展示页面设计教程下载，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="page">
 <!--主体-->
 <view class="page__bd"> 
  <view class="list">

    <view class="page__bd">
        <view class="weui-cells weui-cells_after-title">
            <navigator url="/pages/msg/list?id=comment" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__hd">
                   <image src="/img/msg_1.png" style="margin-right: 5px;vertical-align: middle;width:40px; height: 40px;"></image>
                </view>
                <view class="weui-cell__bd">评论</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"><view class="weui-badge" wx:if="{{data.comment}}" style="margin-left: 5px;">{{data.comment}}</view></view>
            </navigator>
        </view>
        <view class="weui-cells weui-cells_after-title">
            <navigator url="/pages/msg/list?id=zan" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__hd">
                   <image src="/img/msg_2.png" style="margin-right: 5px;vertical-align: middle;width:40px; height: 40px;"></image>
                </view>
                <view class="weui-cell__bd">赞</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"><view class="weui-badge" wx:if="{{data.zan}}" style="margin-left: 5px;">{{data.zan}}</view></view>
            </navigator>
        </view>
        <view class="weui-cells weui-cells_after-title">
            <navigator url="/pages/msg/list?id=notice" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__hd">
                   <image src="/img/msg_3.png" style="margin-right: 5px;vertical-align: middle;width:40px; height: 40px;"></image>
                </view>
                <view class="weui-cell__bd">系统消息</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"><view class="weui-badge" wx:if="{{data.notice}}" style="margin-left: 5px;">{{data.notice}}</view></view>
            </navigator>
        </view>
    </view>


  </view>
 </view>
 <!--没有页脚-->
</view>

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

.list view{font-size:12pt;}
.list .weui-cell{padding: 15px !important}

三、js页面代码如下：

// pages/msg/index.js
var util = require('../../utils/util.js');
var app = getApp();
Page({
  data:{},
  msg:function(){
    var that = this;
    util.req('msg/getall', { sk: app.globalData.sk }, function (data) {
      var zan = 0;
      var comment = 0;
      var notice = 0;
      if (data.data == null) {
        var data = { zan: zan, comment: comment, notice: notice };
        that.setData({ data: data });
        return false;      
      }
      data.data.forEach(function (item) {
        if (item.type == 'zan') {
          zan = item.count;
        }
        if (item.type == 'comment') {
          comment = item.count;
        }
        if (item.type == 'notice') {
          notice = item.count;
        }
      })
      var data = { zan: zan, comment: comment, notice: notice };
      that.setData({ data: data });
  })
  },
  onShow: function () {
    this.msg();
  },
  onPullDownRefresh: function () {
    this.msg();
    wx.stopPullDownRefresh();
  },

})

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