```
//注意：所有代碼放入到此代碼塊中
<scroll-view scroll-y="{{modalName==null}}" class="page {{modalName!=null?'show':''}}">
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">列表</view>
</cu-custom>
</scroll-view>
```
## **宮格列表**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-modal {{modalName=='gridModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<radio-group class="block" bindchange="gridchange">
<view class="cu-list menu text-left">
<view class="cu-item" wx:for="{{3}}" wx:key>
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">{{index +3}} 列</view>
<radio class="round" value="{{index +3}}" checked="{{gridCol==index+3}}"></radio>
</label>
</view>
</view>
</radio-group>
<view class="cu-list menu text-left solid-top">
<view class="cu-item">
<view class="content">
<text class="text-grey">邊框</text>
</view>
<view class="action">
<switch bindchange="gridswitch"></switch>
</view>
</view>
</view>
</view>
</view>
```
#### **xxx.wxss**
```
.page {
height: 100Vh;
width: 100vw;
}
.page.show {
overflow: hidden;
}
.switch-sex::after {
content: "\e716";
}
.switch-sex::before {
content: "\e7a9";
}
.switch-music::after {
content: "\e66a";
}
.switch-music::before {
content: "\e6db";
}
```
#### **xxx.JS**
```
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
iconList: [{
icon: 'cardboardfill',
color: 'red',
badge: 120,
name: 'VR'
}, {
icon: 'recordfill',
color: 'orange',
badge: 1,
name: '錄像'
}, {
icon: 'picfill',
color: 'yellow',
badge: 0,
name: '圖像'
}, {
icon: 'noticefill',
color: 'olive',
badge: 22,
name: '通知'
}, {
icon: 'upstagefill',
color: 'cyan',
badge: 0,
name: '排行榜'
}, {
icon: 'clothesfill',
color: 'blue',
badge: 0,
name: '皮膚'
}, {
icon: 'discoverfill',
color: 'purple',
badge: 0,
name: '發現'
}, {
icon: 'questionfill',
color: 'mauve',
badge: 0,
name: '幫助'
}, {
icon: 'commandfill',
color: 'purple',
badge: 0,
name: '問答'
}, {
icon: 'brandfill',
color: 'mauve',
badge: 0,
name: '版權'
}],
gridCol:3,
skin: false
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
gridchange: function (e) {
this.setData({
gridCol: e.detail.value
});
},
gridswitch: function (e) {
this.setData({
gridBorder: e.detail.value
});
},
menuBorder: function (e) {
this.setData({
menuBorder: e.detail.value
});
},
menuArrow: function (e) {
this.setData({
menuArrow: e.detail.value
});
},
menuCard: function (e) {
this.setData({
menuCard: e.detail.value
});
},
switchSex: function (e) {
this.setData({
skin: e.detail.value
});
},
// ListTouch觸摸開始
ListTouchStart(e) {
this.setData({
ListTouchStart: e.touches[0].pageX
})
},
// ListTouch計算方向
ListTouchMove(e) {
this.setData({
ListTouchDirection: e.touches[0].pageX - this.data.ListTouchStart > 0 ? 'right' : 'left'
})
},
// ListTouch計算滾動
ListTouchEnd(e) {
if (this.data.ListTouchDirection =='left'){
this.setData({
modalName: e.currentTarget.dataset.target
})
} else {
this.setData({
modalName: null
})
}
this.setData({
ListTouchDirection: null
})
},
})
```
## **菜單列表**
#### 示例
:-: 
:-: 
#### **xxx.wxml**
```
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<scroll-view scroll-y style="height:300rpx">
<view class="cu-list menu text-left solid-top">
<view class="cu-item">
<view class="content">
<text class="text-grey">短邊框</text>
</view>
<view class="action">
<switch bindchange="menuBorder"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">箭頭</text>
</view>
<view class="action">
<switch bindchange="menuArrow"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">卡片</text>
</view>
<view class="action">
<switch bindchange="menuCard"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">短邊框</text>
</view>
<view class="action">
<switch bindchange="menuBorder"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">箭頭</text>
</view>
<view class="action">
<switch bindchange="menuArrow"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">卡片</text>
</view>
<view class="action">
<switch bindchange="menuCard"></switch>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
```
## **消息列表**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凱爾</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="cuIcon-infofill text-red margin-right-xs"></text> 我已天理為憑，踏入這片荒蕪，不再受凡人的枷鎖遏制。我已天理為憑，踏入這片荒蕪，不再受凡人的枷鎖遏制。
</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
<view class="cu-tag badge">99+</view>
</view>
<view class="content">
<view class="text-grey">
<text class="text-cut">瓦洛蘭之盾-塔里克</text>
<view class="cu-tag round bg-orange sm">戰士</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">塔里克是保護者星靈，用超乎尋常的力量守護著符文之地的生命、仁愛以及萬物之美。塔里克由于瀆職而被放逐，離開了祖國德瑪西亞，前去攀登巨神峰尋找救贖，但他找到的卻是來自星界的更高層的召喚。現在的塔里克與古代巨神族的神力相融合，以瓦洛蘭之盾的身份，永不疲倦地警惕著陰險狡詐的虛空腐化之力。</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cuIcon-notice_forbid_fill text-gray"></view>
</view>
</view>
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">
<view class="text-pink">
<text class="text-cut">莫甘娜</text>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">凱爾，你被自己的光芒變的盲目！</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
<view class="content">
<view>
<text class="text-cut">伊澤瑞爾</text>
<view class="cu-tag round bg-orange sm">斷開連接...</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 等我回來一個打十個</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class="content">
<view>
<text class="text-cut">瓦羅蘭大陸-睡衣守護者-新手保護營</text>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊澤瑞爾：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 傳送中...</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cuIcon-notice_forbid_fill text-gray"></view>
</view>
</view>
</view>
```
## **列表左滑**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-list menu-avatar">
<view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{4}}" wx:key bindtouchstart="ListTouchStart" bindtouchmove="ListTouchMove" bindtouchend="ListTouchEnd" data-target="move-box-{{index}}">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100{{index+1}}.jpg);"></view>
<view class="content">
<view class="text-grey">文曉港</view>
<view class="text-gray text-sm">
<text class="cuIcon-infofill text-red"></text> 消息未送達</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
<view class="move">
<view class="bg-grey">置頂</view>
<view class="bg-red">刪除</view>
</view>
</view>
</view>
```
