微信小程序自定义select下拉选项框的方法
作者：烂泥也能扶上墙
这篇文章主要为大家详细介绍了微信小程序自定义select下拉选项框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序自定义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.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)
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。