微信小程序自定义select下拉选项框

第一步：创建组件所需的文件

第二步：开始配置组件

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.propertiesvar 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)
}

微信小程序自定义select下拉选项框相关推荐

微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
java select 下拉选项框option定位_java select 下拉选项框opt
java select 下拉选项框opt [2021-02-05 09:44:01] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace( ...
微信小程序——好看的radio单选项框，wxml里列表中遍历数组获取id传回给js页面
微信小程序--好看的radio单选项框第一种效果图如下: .wxss代码: .view_container {display: flex;flex-direction: row;justify-c ...
微信小程序原生的下拉框组件
前言近日开发微信小程序时,需要一个下拉框的组件,使用和PC端下拉框一样的方式会显得很丑,于是发现微信官方API有个wx.showActionSheet,但是有诸多限制,例如:最大长度只能是6项,多选 ...
微信小程序实战篇-下拉刷新与加载更多
下拉刷新实现下拉刷新目前能想到的有两种方式调用系统的API,系统有提供下拉刷新的API接口下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...

微信小程序自定义select下拉选项框

第一步：创建组件所需的文件

第二步：开始配置组件

第三步：自定义组件样式及js

第四步：引入组件，传入组件所需数据

微信小程序自定义select下拉选项框相关推荐

最新文章

热门文章