废话不多说,直接上代码自定义组件select
select.wxml
<!--components/select/select.wxml-->
<view class='com-selectBox'>
<view class='com-sContent' bindtap='selectToggle'>
<input value="{{nowText==''?propArray[0].text : nowText}}" placeholder="请选择" bindinput="vagueFun"></input>
<view class='com-sTxt'></view>
<image src='../../images/photo/back_btn.png' class='com-sImg' animation="{{animationData}}"></image>
</view>
<view class='com-sList' wx:if="{{selectShow}}">
<view wx:for="{{selectData}}" data-index="{{item.id}}" wx:key='' class='com-sItem' bindtap='setText'>{{item.text}}</view>
</view>
</view>
select.wxss
/* components/select/select.wxss */
.com-selectBox {
width: 100%;
margin: auto;
height: 100rpx;
line-height: 100rpx;
background-color: aqua;
}
.com-sContent input {
height: 100rpx;
line-height: 100rpx;
text-align: left;
padding: 0rpx 30rpx;
}
.com-sContent {
background: white;
font-size: 30rpx;
position: relative;
height: 100rpx;
line-height: 100rpx;
width: 100%;
}
.com-sImg {
position: absolute;
width: 25rpx;
height: 15rpx;
right: 20rpx;
top: 50%;
transition: all .3s ease;
}
.com-sTxt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 40rpx 0 12rpx;
font-size: 30rpx;
color: #AAA6A2;
background-color: aqua;
}
.com-sList {
background: white;
width: 100%;
position: absolute;
border-top: none;
box-sizing: border-box;
z-index: 3;
max-height: 300rpx;
overflow: auto;
background: #FFFFFF;
box-shadow: 0px 10px 10px rgba(33,33,43,0.09) ;
border-radius: 0 0 20rpx 20rpx;
}
.com-sItem {
height: 80rpx;
line-height: 80rpx;
padding: 0 20rpx;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 28rpx;
}
.com-sItem:first-child {
border-top: none;
}
select.js
// components/select/select.js
Component({
/*** 组件的属性列表*/
properties: {
propArray: {
type: Array,
},
},
/*** 组件的初始数据*/
data: {
selectShow: false, //初始option不显示
nowText: "", //初始内容
animationData: {}, //右边箭头的动画
selectData: [],
},
/*** 组件的方法列表*/
methods: {
selectToggle: function() {
this.setData({
selectData: JSON.parse(JSON.stringify(this.properties.propArray))
})
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的数据是引入组件的页面传过来的
let nowIndx = e.target.dataset.index; //当前点击的索引
var nowText = "";
//当前点击的内容
for (var i in nowData) {
if (nowData[i].id == nowIndx) {
console.log(nowData[i].text)
nowText = nowData[i].text;
//当前点击的内容break;
}
}
//再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
this.animation.rotate(0).step();
this.setData({
selectShow: false,
nowText: nowText,
animationData: this.animation.export()
})
var nowDate = {
id: nowIndx,
text: nowText
}
this.triggerEvent('myget', nowDate)
},
vagueFun: function(e) {
var data = []
for (var i in this.properties.propArray) {
var y = this.properties.propArray[i].text.indexOf(e.detail.value)
if (y != -1) {
data.push({
id: this.properties.propArray[i].id,
text: this.properties.propArray[i].text,
})
}
}
this.setData({
selectData: data,
})
},
}
})
最后调用
<select class="select" prop-array='{{selectArray}}' bind:myget='getDate'></select>
getDate: function(e) {
console.log(e)
//选中的值
},
网友评论