WordPress小程序开发时如何自定义select下拉框组件呢？模板兔给大家讲解一下。当然，你可以使用自带的picker组件，如果想自定义，那么可以看看下面的教程。
首先新建一个components文件夹，然后在里面创建一个select目录，再创建select页面。
select.js文件代码：
// components/select/select.js
Component({
/**
* 组件的属性列表
*/
properties: {
propArray: {
type: Array,
},
key: {
type: String,
value: 'id'
},
value: {
type: String,
value: 'name'
}
},
/**
* 组件的初始数据
*/
data: {
selectShow: false, //初始option不显示
nowValue: "请选择", //初始内容
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
})
},
//设置内容
selectKey: function (e) {
var nowData = this.properties.propArray; //当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
var nowIdx = e.target.dataset.index; //当前点击的索引
var nowKey = nowData[nowIdx].key; //当前点击的内容
var nowValue = nowData[nowIdx].value; //当前点击的内容
//子组件触发事件
var nowDate = {
id: nowIdx,
key: nowKey,
value: nowValue
}
this.triggerEvent('selected', nowDate)
//再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
this.animation.rotate(0).step();
this.setData({
selectShow: false,
nowValue: nowValue,
animationData: this.animation.export()
})
}
}
})
select.json文件代码：
{
"component": true,
"usingComponents": {
"select": "./select"
}
}
select.wxml文件代码：
<!--components/select/select.wxml-->
<view class='wx-select'>
<view class='wx-select-content' bindtap='selectToggle'>
<view class='wx-select-label'>{{nowValue}}</view>
<image src='' class='wx-select-icon' animation="{{animationData}}"></image>
</view>
<view class='wx-select-options' wx:if="{{selectShow}}">
<view wx:for="{{propArray}}" data-index="{{index}}" data-key="{{item.key}}" wx:key="id" class="wx-select-option" bindtap="selectKey">{{item.value}}</view>
</view>
</view>
select.wxss文件代码：
/* components/select/select.wxss */
.wx-select{
width: 100%;
}
.wx-select-content{
border: 1px solid #e2e2e2;
background: #000;
font-size: 16px;
position: relative;
height: 30px;
line-height: 30px;
}
.wx-select-icon{
position: absolute;
right: 10px;
top: 11px;
width: 16px;
height: 9px;
transition: all .3s ease;
}
.wx-select-label{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding:0 20px 0 6px;
font-size: 14px;
}
.wx-select-options{
background: #000;
color:#fff;
width: inherit;
position: absolute;
border: 1px solid #e2e2e2;
border-top: none;
box-sizing: border-box;
z-index: 3;
max-height: 120px;
overflow: auto;
}
.wx-select-option{
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;
}
.wx-select-option:first-child{
border-top: none;
}
在你需要使用这个组件的page的json文件里引用。
"usingComponents": {"select": "../../components/select/select"}
然后使用组件代码来显示，bindSelectTap就是绑定的动作
<select prop-array='{{selectArray}}' bind:selected='bindSelectTap'></Select>
js文件里使用
bindSelectTap:function(e){
console.log(e.detail)
}
0 个评论