微信小程序select下拉框实现效果

2020-03-21 15:56:23

字体：大中小

来源：转载

供稿：网友

微信小程序,select,下拉框

小程序中是没有h5中的下拉标签的所以要实现下拉功能就必须自己动手写拉

这里为了更清楚的显示层级就把源码直接复制过来了

<view class='list-msg'>  <view class='list-msg1'>    <text>商品金额</text>    <text>￥99.00</text>  </view><!--下拉框 -->  <view class='list-msg2' bindtap='bindShowMsg'>    <text>{{tihuoWay}}</text>    <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image>  </view>  <view class='list-msg1'>    <text>运费</text>    <text></text>免邮</view>  <view class='list-msg1'>    <text>实际付款</text>    <text style='color:red'>￥99.00</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>

下面是js代码

Page({   /**   * 页面的初始数据   */  data: {    select: false,    tihuoWay: '门店自提'  },   /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {   },  bindShowMsg() {     this.setData({       select:!this.data.select     })  },  mySelect(e) {    var name = e.currentTarget.dataset.name    this.setData({      tihuoWay: name,      select: false    })  },    /**   * 用户点击右上角分享   */  onShareAppMessage: function () {   }})

.list-msg {  padding: 0 20rpx;  background-color: #fff;  position: relative;} .list-msg1 {  height: 60rpx;  display: flex;  align-items: center;  justify-content: space-between;} .list-msg .list-msg2 {  height: 60rpx;  display: flex;  align-items: center;  justify-content: space-between;  border: 1px solid #ccc;  padding: 0 10rpx;} .select_box {  background-color: #eee;  padding: 0 10rpx;  width: 93%;  position: absolute;  top: 130rpx;  z-index: 1;  overflow: hidden;  animation: myfirst 0.5s;} @keyframes myfirst {  from {    height: 0rpx;  }   to {    height: 210rpx;  }} .select_one {  height: 60rpx;  line-height: 60rpx;  border-bottom: 1px solid #ccc;}

以上所述是小编给大家介绍的微信小程序select下拉框实现效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VEVB武林网网站的支持！

上一篇：如何实现小程序tab栏下划线动画效果

下一篇：微信小程序的mpvue框架快速上手指南