微信小程序下拉框示例代码
时间: 2023-09-16 13:12:17 浏览: 95
微信小程序下拉框功能的实例代码
5星 · 资源好评率100%
这是一个简单的微信小程序下拉框示例代码:
```
<view class="select-box">
<view class="select-text" bindtap="showSelectList">{{selectList[selectIndex]}}</view>
<view class="select-list" wx:if="{{isShowSelectList}}">
<view class="select-item" wx:for="{{selectList}}" wx:key="index" bindtap="selectItem" data-index="{{index}}">{{item}}</view>
</view>
</view>
<script>
Page({
data: {
selectList: ['选项1', '选项2', '选项3'],
selectIndex: 0,
isShowSelectList: false,
},
showSelectList() {
this.setData({
isShowSelectList: !this.data.isShowSelectList
})
},
selectItem(e) {
let index = e.currentTarget.dataset.index
this.setData({
selectIndex: index,
isShowSelectList: false
})
}
})
</script>
```
这里我们使用了一个 `select-box` 的视图来实现下拉框的显示和隐藏,通过点击 `select-text` 来控制下拉框的显示和隐藏。`select-list` 中的项目是可以通过循环渲染出来的。
请注意,这只是一个简单的示例代码,实际应用中可能需要根据需求进行修改。
阅读全文