微信小程序基本列表带说明跳转的列表项样式设计模板教程

今天给大家带来基本列表带说明跳转的列表项样式设计模板教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="page">
    <view class="page__hd">
        <view class="page__title">List</view>
        <view class="page__desc">列表</view>
    </view>
    <view class="page__bd">
        <view class="weui-cells__title">带说明的列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">标题文字</view>
                <view class="weui-cell__ft">说明文字</view>
            </view>
        </view>

        <view class="weui-cells__title">带图标、说明的列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__hd">
                    <image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                </view>
                <view class="weui-cell__bd">标题文字</view>
                <view class="weui-cell__ft">说明文字</view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__hd">
                    <image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                </view>
                <view class="weui-cell__bd">标题文字</view>
                <view class="weui-cell__ft">说明文字</view>
            </view>
        </view>

        <view class="weui-cells__title">带跳转的列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
            </navigator>
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
            </navigator>
        </view>

        <view class="weui-cells__title">带说明、跳转的列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
            </navigator>
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
            </navigator>
        </view>

        <view class="weui-cells__title">带图标、说明、跳转的列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__hd">
                    <image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                </view>
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
            </navigator>
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__hd">
                    <image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                </view>
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
            </navigator>
        </view>
    </view>
</view>

二、js页面代码如下：

var base64 = require("../images/base64");
Page({
    onLoad: function(){
        this.setData({
            icon: base64.icon20
        });
    }
});

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