【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 } }) 

1. 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" } 

1. list.js

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

1. 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>