微信小程序下拉选择_微信小程序下拉框

微信小程序中下拉框选择一般的交互方式有以下两种

1. 直接下拉选择
2. 点击选择框后，弹出浮层进行选择

下边分别介绍两种方式的实现。在微信小程序中，这两种实现都需要修改三个文件

js 文件：下拉选择逻辑的具体实现
wxml 文件：下拉组件引入、定义
wxss 文件：下拉框样式设计

直接下拉选择

在 wxml 中定义所有选择项

使用这种方式需要为每一项都绑定点击事件
wxml内容如下。
其中 bindShowMsg 处理的是选择之后需要显示的内容；
class：select_box 为所有可选择项，每一个选择项上绑定的点击事件mySelect 来处理选择某一项之后的逻辑。

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在 wxss 中进行样式定义

.list-msg {
   
  padding: 0 20rpx;
  background-color: #fff;
  <
1
2
3
4