微信小程式weui線上入門教程-WeUi表單元件-list列表
阿新 • • 發佈:2019-01-14
效果圖
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="/images/weui.png" 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="/images/weui.png" 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="/images/weui.png" 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="/images/weui.png" 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>