帮我写一个原声小程序好看的遍历列表代码
时间: 2023-08-28 19:31:02 浏览: 91
RED5遍历客户端并生成在线列表原代码
当然可以!以下是一个简单的遍历列表的小程序代码:
```javascript
//index.js
Page({
data: {
items: [
{name: 'item1', value: '选项1'},
{name: 'item2', value: '选项2', checked: true},
{name: 'item3', value: '选项3'},
{name: 'item4', value: '选项4'},
{name: 'item5', value: '选项5'},
{name: 'item6', value: '选项6'},
]
},
checkboxChange: function(e) {
console.log('选中的值为:', e.detail.value)
}
})
```
```html
<!--index.wxml-->
<view class="container">
<view class="header">
<text class="title">选择您的选项</text>
</view>
<view class="body">
<checkbox-group bindchange="checkboxChange">
<block wx:for="{{items}}">
<checkbox value="{{index}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</block>
</checkbox-group>
</view>
</view>
```
```css
/*index.wxss*/
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f8f8f8;
}
.header {
margin-bottom: 20px;
}
.title {
font-size: 24px;
font-weight: bold;
}
.body {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.checkbox-group {
display: flex;
flex-direction: column;
}
.checkbox {
margin-bottom: 10px;
}
```
这个小程序使用了`checkbox-group`和`checkbox`标签来创建一个遍历列表,并且使用了`wx:for`来遍历`items`数组,将每个选项显示出来。在用户选中或取消选项时,`checkboxChange`方法会被调用,将选中的值打印到控制台上。
阅读全文