一、打开微信小程序IDE工具，pages目录下新目录list以及新建文件list
二、在项目根目录下的app.json中配置新建的文件list，如下图
三、打开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>如上述代码的节点class名称，均为微信小程序weui样式库中的class名称，直接引用即可。
第19行和26行分别引用了图标变量，在下面js代码中会有定义。
四、打开list.js文件，添加如下代码
由于weui list中有带图标说明的列表项，所以给列表项加图标
// pages/list/list.js var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg=="
定义一个全局变量，然后在onLoad函数中添加如下代码
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
icon: img
});
},五、点击小程序IDE编译按钮，预览效果如下：
此文章本站原创，地址 https://www.vxzsk.com/1881.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程