欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    2018-06-22 09:46 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序系统消息评论展示页面设计教程下载,制作好以后效果图如下:
    一、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>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议