微信小程序中下拉框选择一般的交互方式有以下两种
- 直接下拉选择
- 点击选择框后，弹出浮层进行选择
下边分别介绍两种方式的实现。在微信小程序中，这两种实现都需要修改三个文件
js 文件：下拉选择逻辑的具体实现
wxml 文件：下拉组件引入、定义
wxss 文件：下拉框样式设计
直接下拉选择
在 wxml 中定义所有选择项
使用这种方式需要为每一项都绑定点击事件
wxml内容如下。
其中 bindShowMsg 处理的是选择之后需要显示的内容；
class：select_box 为所有可选择项，每一个选择项上绑定的点击事件mySelect 来处理选择某一项之后的逻辑。文章来源：https://www.toymoban.com/news/detail-602324.html
<view class='list-msg'>
下拉框
<view class='list-msg2' bindtap='bindShowMsg'>
<text>{
{tihuoWay}}</text>
</view>
下拉需要显示的列表
<view class="select_box" wx:if="{
{select}}">
<view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>
<view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>
<view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view>
</view>
</view>
在 wxss 中进行样式定义文章来源地址https://www.toymoban.com/news/detail-602324.html
.list-msg {
padding: 0 20rpx;
background-color: #fff;
<到了这里，关于微信小程序下拉选择的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
