微信小程序做个选项表格
时间: 2023-06-28 22:05:56 浏览: 147
微信小程序实现简单表格
好的,可以使用微信小程序的`<picker-view>`组件来实现一个选项表格。以下是一个简单的例子:
```html
<view class="container">
<picker-view class="picker-view" value="{{value}}" bindchange="bindPickerChange">
<picker-view-column>
<view class="picker-view-item">选项1</view>
<view class="picker-view-item">选项2</view>
<view class="picker-view-item">选项3</view>
</picker-view-column>
<picker-view-column>
<view class="picker-view-item">选项A</view>
<view class="picker-view-item">选项B</view>
<view class="picker-view-item">选项C</view>
</picker-view-column>
</picker-view>
</view>
```
上面的代码中,我们定义了一个包含两列的`<picker-view>`,每列都包含三个选项。用户可以通过滑动选择自己需要的选项。同时,我们还绑定了一个`bindchange`事件,在用户选择完毕后会触发该事件。
接下来,我们需要在小程序的js文件中定义`bindPickerChange`函数来处理用户选择的结果。以下是一个简单的例子:
```javascript
Page({
data: {
value: [0, 0] // 默认选择第一个选项
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
value: e.detail.value
})
}
})
```
在上面的代码中,我们定义了一个`value`变量来存储用户选择的结果。同时,我们定义了一个`bindPickerChange`函数来处理用户选择完毕后的结果,将用户选择的结果存储到`value`变量中。
最后,我们需要在小程序的样式文件中定义一些样式来美化选项表格。以下是一个简单的例子:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.picker-view {
width: 80vw;
height: 40vh;
}
.picker-view-item {
line-height: 40px;
height: 40px;
}
```
在上面的代码中,我们将选项表格居中并设置了一些样式来美化选项表格。
综上所述,以上是一个简单的选项表格示例。你可以根据自己的需求修改代码来实现自己想要的效果。
阅读全文