微信小程序下拉选项框

效果图

test.js

/*** 页面的初始数据*/data: {shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据indexs: 0, //选择的下拉列 表下标,},// 点击下拉显示框selectTaps() {this.setData({shows: !this.data.shows,});},// 点击下拉列表optionTaps(e) {let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标console.log(Indexs)this.setData({indexs: Indexs,shows: !this.data.shows});},

test.wxml

<view class='fenlei'><text>地址</text><!-- 下拉框 --><view class='select_box'><view class='select' catchtap='selectTaps'><text class='select_text'>{{selectDatas[indexs]}}</text><!-- <image class='words_img' src='../../images/sanjiao.png'></image> --><image class='select_img {{shows&&"select_img_rotate"}}' src='../../images/sanjiao.png'></image></view><view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'><text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text></view></view>
</view>

test.wxss

/* fenlei */
.fenlei{margin: 0 25rpx;height: 90rpx;line-height: 90rpx;border-bottom: 1rpx solid #e6e6e6;display: flex;align-items: center;
}
.fenlei text{font-size: 30rpx;color: #999999;margin-left: 15rpx;
}
/* 下拉框 */
.select_box {background: #fff;width: 620rpx;/* margin: 0 auto; */height: 90rpx;line-height: 90rpx;text-align: left;position: relative;
}.select {box-sizing: border-box;width: 100%;height: 86rpx;/* border: 1px solid #efefef; */border-radius: 8rpx;display: flex;align-items: center;padding: 0 20rpx;
}.select_text {font-size: 28rpx;flex: 1;color: rgb(102, 102, 102);line-height: 86rpx;height: 86rpx;
}.select_img {width: 40rpx;height: 40rpx;display: block;transition: transform 0.3s;
}.select_img_rotate {transform: rotate(180deg);
}.option_box {position: absolute;top: 86rpx;width: 100%;/* border: 1px solid #efefef; */box-sizing: border-box;height: 0;overflow-y: auto;border-top: 0;background: #fff;transition: height 0.3s;z-index: 100;
}.option {display: block;line-height: 40rpx;font-size: 28rpx;border-bottom: 1px solid #efefef;padding: 10rpx;color: rgb(102, 102, 102);
}

微信小程序下拉选项框相关推荐

微信小程序下拉选择框
一般来说的话,总有点需要下拉并且能够搜索选择的需求. 首先wxml <view class='menu-po'>& ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
微信小程序下拉不触发onPullDownRefresh
微信小程序下拉onpulldownrefresh不触发简单记录下微信小程序下拉不触发方法的问题 1.下拉出发需要在app.json中配置下拉的内容 "window": {&quo ...

微信小程序下拉选项框

微信小程序下拉选项框相关推荐

最新文章

热门文章