微信小程序丨scroll-view实现下拉列表弹窗

在一些特殊的UI设计中，需要点击某一处然后弹出下拉菜单列表进行交互。下面介绍一种比较简单的实现方法：

wxml文件，使用isShowSelectList参数来控制列表是否隐藏，添加绑定事件bindtap="tapSelectBackView"。

<view class="selectDevice">请选择设备</view>
<view>
  <view class="selectBackView" bindtap="tapSelectBackView">
    <image class="selDevIcon" src="/images/connect/icon_cace_w.png"></image>
    <view class="selDevName">箱子名称</view>
    <image class="selRightIcon" src="/images/connect/{{isShowSelectList?'icon_down':'icon_right'}}.png"></image>
  </view>
  <!-- 可隐藏的下拉列表 -->
  <scroll-view class="selectListView" scroll-y="true" wx:if="{{isShowSelectList}}">
    <view class="{{false?'selCellView':'unselCellView'}}">
      <image class="selDevIcon" src="/images/connect/{{false?'icon_cace_w':'icon_cace_b'}}.png"></image>
      <view class="{{false?'selDevName':'unselDevName'}}">其它箱子</view>
      <image class="selRightIcon"></image>
    </view>
    <view class="{{true?'selCellView':'unselCellView'}}">
      <image class="selDevIcon" src="/images/connect/{{true?'icon_cace_w':'icon_cace_b'}}.png"></image>
      <view class="{{true?'selDevName':'unselDevName'}}">箱子名称</view>
      <image class="selRightIcon"></image>
    </view>
    <view class="{{false?'selCellView':'unselCellView'}}">
      <image class="selDevIcon" src="/images/connect/{{false?'icon_cace_w':'icon_cace_b'}}.png"></image>
      <view class="{{false?'selDevName':'unselDevName'}}">箱子名称</view>
      <image class="selRightIcon"></image>
    </view>
    <view class="{{false?'selCellView':'unselCellView'}}">
      <image class="selDevIcon" src="/images/connect/{{false?'icon_cace_w':'icon_cace_b'}}.png"></image>
      <view class="{{false?'selDevName':'unselDevName'}}">箱子名称</view>
      <image class="selRightIcon"></image>
    </view>
    <view class="{{false?'selCellView':'unselCellView'}}">
      <image class="selDevIcon" src="/images/connect/{{false?'icon_cace_w':'icon_cace_b'}}.png"></image>
      <view class="{{false?'selDevName':'unselDevName'}}">箱子名称</view>
      <image class="selRightIcon"></image>
    </view>
  </scroll-view>
</view>

wxss文件，将.selectListView的位置设置为position: absolute;

page {
    background: #F9F9F9;
    color: #13243C;
    font-size: 17px;
}

.selectDevice,.selectConnect {
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 30px;
}

.selectBackView {
    background: #3C3D54;
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
    display: flex;
    flex-direction: row;
    align-items:center;
    width: auto;
    height: 55px;
    border-radius: 4px 4px 0px 0px;
}

.selDevIcon {
    width: 38px;
    height: 38px;
    margin-left: 20px;
}

.selDevName {
    color: white;
    font-size: 18px;
    margin-left: auto;
    margin-right: 5px;
}

.selRightIcon {
    width: 20px;
    height: 20px;
    margin-right: 20px;
}

.selectListView {
    background: white;
    position: absolute;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 30px * 2);
    height: calc(55px * 3);
    white-space: nowrap;
}

.selCellView {
    background: #00B99B;
    display: flex;
    flex-direction: row;
    align-items:center;
    width: 100%;
    height: 55px;
}

.unselCellView {
    background: white;
    display: flex;
    flex-direction: row;
    align-items:center;
    width: 100%;
    height: 55px;
}

.unselDevName {
    font-size: 18px;
    margin-left: auto;
    margin-right: 5px;
}

js文件，在tapSelectBackView点击事件中控制isShowSelectList的值来让列表进行展示。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShowSelectList: false,
  },

  tapSelectBackView: function() {
    this.setData({
      isShowSelectList: !this.data.isShowSelectList
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  }
})

最后编辑于：2019.12.26 14:43:21