-
2022-03-28 16:29:21
custom-drop-down/index.wxml
<!--pages/component/custom-drop-down/index.wxml--> <view style="position: relative; display: flex; flex-direction: column;"> <view style="display:flex; align-items: center; border:black 1px solid" bindtap="clickShow"> <view class="dropdown-value">{{provinceValue}}</view> <image src="./../../../images/arrow-down.png" class="dropdown-image"></image> </view> <view style="height: 100px; border:darkgray 1px solid" wx:if="{{show}}"> <scroll-view style="height: 100px;" scroll-y="ture"> <view wx:for="{{option2}}" wx:key="value" bindtap="selectIndex" data-index="{{index}}" class="dropdown-item"> {{item.text}}<image src="./../../../images/duihao.png" class="dropdown-item-img" wx:if="{{item.selected}}"></image> </view> </scroll-view> </view> </view>
custom-drop-down/index.wxss
/* pages/component/custom-drop-down/index.wxss */ .dropdown-item { margin: 10px 10px; } .dropdown-item-img { float: right; right: 15px; width: 16px; height: 16px; } .dropdown-image { width: 16px; height: 16px; } .dropdown-value { flex: 1;padding-left: 5px; }
custom-drop-down/index.js
// pages/component/custom-drop-down/index.js Component({ /** * 组件的属性列表 */ properties: { option2: { type: Array, value: [ { text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }, ] }, show: { type:Boolean, value:false } }, /** * 组件的初始数据 */ data: { provinceValue:'排序' }, /** * 组件的方法列表 */ methods: { clickShow: function() { this.setData({ show:!this.data.show }) }, selectIndex: function(option) { console.log('selectIndex',option); let index = option.currentTarget.dataset.index; console.log('selectIndex====',this.data.option2[index].text); for(let i=0;i<this.data.option2.length;i++) { let item = this.data.option2[i]; if(i == index) { item.selected = true; } else { item.selected = false; } } this.setData({ provinceValue:this.data.option2[index].text, option2:this.data.option2, show:false }) } } })
custom-drop-down/index.json
{ "component": true, "usingComponents": {} }
调用:
<custom-dropdown option2="{{option2}}"></custom-dropdown>
更多相关内容 -
微信小程序 下拉菜单的实现
2020-11-27 18:49:49微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; ... -
微信小程序 下拉列表的实现实例代码
2020-08-31 03:50:54主要介绍了微信小程序 下拉列表的实现实例代码的相关资料,需要的朋友可以参考下 -
微信小程序实现列表下拉刷新上拉加载
2020-11-26 16:58:32本文实例为大家分享了微信小程序实现列表下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载... -
微信小程序 下拉菜单简单实例
2020-08-30 20:10:53主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下 -
微信小程序自定义select下拉选项框组件的实现代码
2021-01-03 08:26:53微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。 ... -
微信小程序之下拉列表实现方法解析(附完整源码)
2020-12-09 10:45:34跟网页的下拉列表实现是一样的,刚刚开始默认下拉的内容的是不显示的(display:none),然后通过点击的时候,去更改 display 的属性值,来实现下拉的效果。然后下拉的动画的通过 css3 的 animation 来实现的。 CSS3... -
微信小程序之自定义下拉列表框(新)
2022-05-10 16:59:38下拉列表中的值选中后,关闭列表,再打开,值可记忆,并显示相应的选中样式 .wxml <!--pages/component/custom-drop-down/index.wxml--> <view class="drop-container"> <view class="drop-main...下拉列表中的值选中后,关闭列表,再打开,值可记忆,并显示相应的选中样式
.wxml
<!--pages/component/custom-drop-down/index.wxml--> <view class="drop-container"> <view class="drop-main" bindtap="clickShow"> <view class="dropdown-value">{{provinceValue}}</view> <image src="./../../../images/arrow-down.png" class="dropdown-image"></image> </view> <view class="list-style" wx:if="{{show}}"> <scroll-view style="height: 100px;" scroll-y="ture" bindscrolltolower='loadMore'> <view wx:for="{{option2}}" wx:key="value" bindtap="selectIndex" data-index="{{index}}" class="dropdown-item"> {{item.text}}<image src="./../../../images/duihao.png" class="dropdown-item-img" wx:if="{{item.selected}}"></image> </view> </scroll-view> </view> </view>
.js
// pages/component/custom-drop-down/index.js Component({ /** * 组件的属性列表 */ properties: { option2: { type: Array, value: [ { text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }, ] }, show: { type:Boolean, value:false }, selectedData: { type:Object, value:{} } }, /** * 组件的初始数据 */ data: { provinceValue:'请选择' }, /** * 组件的方法列表 */ methods: { clickShow: function() { this.setData({ show:!this.data.show }) }, selectIndex: function(option) { console.log('selectIndex',option); let index = option.currentTarget.dataset.index; console.log('selectIndex====',this.data.option2[index].text); for(let i=0;i<this.data.option2.length;i++) { let item = this.data.option2[i]; if(i == index) { item.selected = true; } else { item.selected = false; } } this.setData({ provinceValue:this.data.option2[index].text, option2:this.data.option2, show:false }) this.triggerEvent('getvalue',this.data.option2[index]) }, selectedValue(name) { for(let i=0;i<this.data.option2.length;i++) { let item = this.data.option2[i]; if(item.text == name) { item.selected = true; } else { item.selected = false; } } this.setData({ option2:this.data.option2 }) }, loadMore(e) { console.log('loadMore',e); } }, lifetimes:{ attached() { if(Object.keys(this.data.selectedData).length === 0) { console.log('attached 111111'); } else { this.selectedValue(this.data.selectedData.text) this.setData({ provinceValue:this.data.selectedData.text }) } // this.setData({ // provinceValue:this.data.option2[0].text // }) } } })
.wxss
/* pages/component/custom-drop-down/index.wxss */ .drop-container { position: relative; display: flex; flex-direction: column; } .drop-main { display:flex; align-items: center; background: white; border: 1px solid #dfdfe2; border-radius: 5px; height: 32px; width: 100%; } .dropdown-item { margin: 10px 10px; } .dropdown-item-img { float: right; right: 15px; width: 16px; height: 16px; } .dropdown-image { width: 16px; height: 16px; margin-right: 8px; } .dropdown-value { flex: 1; padding-left: 16px; font-size: 12px; } .list-style { height: 100px; border:darkgray 1px solid; position: absolute; background-color: white; top:33px; width: 100%; z-index: 100; border-radius: 2px 2px 5px 5px; font-size: 14px; }
使用组件:
<custom-drop-down id="areaDrop" option2="{{shopList}}" selectedData="{{selectShop}}" bindgetvalue="getShopValue"></custom-drop-down>
options2是下拉列表的值,selectedData是记忆选中的值,再次打开下拉列表,该值将是选中状态
-
微信小程序 select 下拉框组件功能
2020-10-16 10:40:58主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
微信小程序中的上拉、下拉菜单功能
2020-11-21 14:40:12上下拉菜单在微信小程序中起提示、选项的功能,当点击它时会弹出属于这个菜单的相应选项。使用vant组件库,将 dist 文件提前下载好然后保存到项目中。在小程序中调用组件库,并在正确引用就可以实现了菜单功能了。 ... -
微信小程序 input表单与redio及下拉列表的使用实例
2020-08-29 08:48:44主要介绍了微信小程序 input表单与redio及下拉列表的使用实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 -
微信小程序中下拉选择中带手动输入搜索的实现
2022-02-10 08:29:41微信小程序中下拉选择中带手动输入搜索的实现 -
微信小程序实现下拉菜单切换效果
2021-01-03 08:06:59本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> ... -
微信小程序select下拉框实现
2020-10-16 01:04:22主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
微信小程序实现下拉框功能
2020-10-16 17:04:10主要为大家详细介绍了微信小程序实现下拉框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
微信小程序下拉刷新,上拉加载及下拉列表制作
2021-03-29 20:00:46小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是... -
微信小程序实现城市列表选择
2020-12-10 11:52:01本文实例为大家分享了小程序实现城市列表选择的具体代码,供大家参考,具体内容如下 实现效果预览 实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app... -
微信小程序实现无限滚动列表
2021-01-03 09:36:19本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下 效果图1.0 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical=‘true’设置同时显示的滑块数量:display-... -
微信小程序列表下拉刷新加载更多
2018-05-04 11:42:19微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多 -
微信小程序 scroll-view组件实现列表页实例代码
2020-11-27 04:22:20scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧! 为app导入新page页面 首先需要为我们的小... -
微信小程序自定义下拉框实现根据输入过滤下拉项.zip
2021-08-20 16:03:11微信小程序自定义下拉框实现根据输入过滤下拉项 -
微信小程序下拉选项框
2019-02-18 11:55:06shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示 selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据 indexs: 0, //选择的下拉列 表下标, }, // 点击下拉显示框 s...效果图
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); }
-
微信小程序select下拉框实现效果
2020-11-26 12:52:20小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 商品金额 ¥99.00 <!--下拉框 --> <text>{{tihuoWay}} <image ... -
微信小程序显示下拉列表功能【附源码下载】
2021-01-19 16:23:58本文实例讲述了微信小程序显示下拉列表功能。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 app.json文件: { pages:[ views/views, views/navigators/navigator1/navigator1, views/navigators/... -
微信小程序自定义select下拉选项框
2021-10-26 15:43:56} select.js Component({ /** * 组件的属性列表 */ properties: { propArray: { type: Array, } }, /** * 组件的初始数据 */ data: { selectShow: false, //初始option不显示 nowText: "请选择", //初始内容 ...第一步:创建组件所需的文件
第二步:开始配置组件
select.json
{ "component": true, "usingComponents": { "select": "./select" } }
第三步:自定义组件样式及js
select.wxml
<view class='com-selectBox'> <view class='com-sContent' bindtap='selectToggle'> <view class='com-sTxt'>{{nowText}}</view> <image src='../../public/image/index/jinru1@2x.png' class='com-sImg' animation="{{animationData}}"></image> </view> <view class='com-sList' wx:if="{{selectShow}}"> <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='' class='com-sItem' bindtap='setText'>{{item.text}}</view> </view> </view>
select.wxss
.com-selectBox{ width: 200px; } .com-sContent{ border: 1px solid #e2e2e2; background: white; font-size: 16px; position: relative; height: 30px; line-height: 30px; } .com-sImg{ position: absolute; right: 10px; top: 11px; width: 16px; height: 9px; transition: all .3s ease; } .com-sTxt{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding:0 20px 0 6px; font-size: 14px; } .com-sList{ background: white; width: inherit; position: absolute; border: 1px solid #e2e2e2; border-top: none; box-sizing: border-box; z-index: 3; max-height: 120px; overflow: auto; } .com-sItem{ height: 30px; line-height: 30px; border-top: 1px solid #e2e2e2; padding: 0 6px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .com-sItem:first-child{ border-top: none; }
select.js
Component({ /** * 组件的属性列表 */ properties: { propArray: { type: Array, } }, /** * 组件的初始数据 */ data: { selectShow: false, //初始option不显示 nowText: "请选择", //初始内容 animationData: {} //右边箭头的动画 }, /** * 组件的方法列表 */ methods: { //option的显示与否 selectToggle: function () { var nowShow = this.data.selectShow; //获取当前option显示的状态 //创建动画 var animation = wx.createAnimation({ timingFunction: "ease" }) this.animation = animation; if (nowShow) { animation.rotate(0).step(); this.setData({ animationData: animation.export() }) } else { animation.rotate(180).step(); this.setData({ animationData: animation.export() }) } this.setData({ selectShow: !nowShow }) }, //设置内容 setText: function (e) { var nowData = this.properties.propArray; //当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties var nowIdx = e.target.dataset.index; //当前点击的索引 var nowText = nowData[nowIdx].text; //当前点击的内容 //子组件触发事件 var nowDate = { id: nowIdx, text: nowText } this.triggerEvent('myget', nowDate) //再次执行动画,注意这里一定,一定,一定是this.animation来使用动画 this.animation.rotate(0).step(); this.setData({ selectShow: false, nowText: nowText, animationData: this.animation.export() }) } } })
第四步:引入组件,传入组件所需数据
1、引入组件的页面的json文件中配置
{ "usingComponents": { "Select": "../../components/select/select" }, "navigationBarTitleText": "" }
2、引入组件的页面的wxml文件中配置
bind:myget=‘getDate’ 对组件的事件进行监听<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>
3、引入组件的页面的js文件中配置
data:{ selectArray: [ { "id": "01", "text": "停车A区" }, { "id": "02", "text": "停车B区" } ] } getDate:function(e){ console.log(e.detail) }
-
微信小程序之下拉菜单的三级筛选框
2021-01-27 09:53:43因为自己最近也需要写个小程序的下拉框的三级菜单筛选,分享给有需要的人哈。 (一)、实现效果 1、原作者资料的实现效果: 2、自己二次开发实现效果: (二)实现过程 实现的代码也并不复杂,主要是控制各个容器的... -
微信小程序下拉列表加载更多数据(vue+uni-app+es6)详解
2022-01-10 17:09:14微信小程序下拉加载数据更多,使用到分页查询的原理。 示例如下: <template> <view> <view v-for="(item,index) in listData" :key="index"> <view>{{item}}</view> </view&...
收藏数
10,319
精华内容
4,127