【Kevin Learn 小程序】--＞List

效果图

代码

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json(小技巧：pages/list/list 点击保存，会自动在 pages 文件夹下创建 list 相应的文件)

{
  "pages": [
    "pages/list/list",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. list.js

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

4. list.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>