第一種方式：可以用wx.showActionSheet來實現(xiàn)下拉框，但是這樣只能最多存放6個數(shù)據(jù)。
wx.showActionSheet的值是用下標去讀取的。效果如下圖：
image.png
直接上代碼
1.目錄結(jié)構
image.png
select.js
// Componet/Componet.js
Component({
lifetimes: {
// 1.循環(huán)集合
// 2.通過鍵遍歷數(shù)據(jù)
// 3.回顯默認值以及設置對應的默認鍵
},
observers: {
'defalutKey,propArray': function (defalutKey, propArray) {
// 在 defalutKey 或者 propArray 被設置時，執(zhí)行這個函數(shù)
this.updateData();
}
},
/**
* 組件的屬性列表
*/
properties: {
//原數(shù)據(jù)集合
propArray: {
type: Array,
},
//集合中對象的鍵屬性
arrayKeyStr: {
type: String,
},
//集合中對象的值屬性
arrayValueStr: {
type: String,
},
//默認的鍵
defalutKey: {
type: String,
},
//是否禁用
isDisabled: {
type: Boolean,
value: false
},
//選項字體顏色
selectColor: {
type: String
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
selectShow: false, //初始option不顯示
nowText: "請選擇", //初始內(nèi)容
animationData: {}, //右邊箭頭的動畫
selectData: {}, //選擇的對象
selectList: [], //選擇的數(shù)據(jù)顯示集合
selectDataList: [] //選擇的數(shù)據(jù)集合
},
/**
* 組件的方法列表
*/
methods: {
updateData() {
var selectList = [];
var selectDataList = [];
this.properties.propArray.forEach(element => {
var map = {
'id': element[this.properties.arrayKeyStr],
'name': element[this.properties.arrayValueStr]
}
selectList.push(element[this.properties.arrayValueStr]);
selectDataList.push(map);
});
this.setData({
selectList: selectList,
selectDataList: selectDataList
})
if (this.properties.propArray.length <= 0) {
this.setData({
nowText: "請選擇", //初始內(nèi)容
})
return;
}
if (this.properties.arrayKeyStr == null || this.properties.arrayKeyStr == '') {
console.log("解析結(jié)合的對象鍵不能為空");
return;
}
if (this.properties.arrayValueStr == null || this.properties.arrayValueStr == '') {
console.log("解析集合對象的值鍵不能為空");
return;
}
if (this.properties.defalutKey != null && this.properties.defalutKey != '') {
var index = 0
this.properties.propArray.forEach(element => {
if (element[this.properties.arrayKeyStr] == this.properties.defalutKey) {
this.setData({
nowText: element[this.properties.arrayValueStr],
selectData: {
value: element[this.properties.arrayKeyStr],
label: element[this.properties.arrayValueStr]
},
index: index
})
return;
}
index++;
});
}
},
//option的顯示與否
selectToggle: function () {
let that = this
//創(chuàng)建動畫
var animation = wx.createAnimation({
timingFunction: "ease"
})
this.animation = animation;
animation.rotate(90).step();
this.setData({
animationData: animation.export()
})
},
bindPickerChange: function (e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setText(e.detail.value)
},
//設置內(nèi)容
setText: function (index) {
var nowData = this.properties.propArray; //當前option的數(shù)據(jù)是引入組件的頁面?zhèn)鬟^來的，所以這里獲取數(shù)據(jù)只有通過this.properties
var nowIdx = index; //當前點擊的索引
var nowValue = nowData[nowIdx].dictValue; //當前點擊的值
var nowText = nowData[nowIdx].dictLabel; //當前點擊的內(nèi)容
//再次執(zhí)行動畫，注意這里一定，一定，一定是this.animation來使用動畫
this.animation.rotate(0).step();
this.setData({
selectShow: false,
nowText: nowText,
animationData: this.animation.export(),
selectData: {
value: nowValue,
label: nowText
}
})
},
// 關閉 picker 觸發(fā)的方法
emitHideRegion: function () {
//再次執(zhí)行動畫，注意這里一定，一定，一定是this.animation來使用動畫
this.animation.rotate(0).step();
this.setData({
animationData: this.animation.export()
})
},
/**
* 獲取選擇的對象
*/
GetSelectValue() {
return this.data.selectData
}
}
})
select.json
{
"component": true,
"usingComponents": {}
}
select.wxml
<view class='com-selectBox'>
<picker class='com-sContent' bindcancel="emitHideRegion" disabled="{{isDisabled}}" bindtap="{{isDisabled?'':'selectToggle'}}" bindchange="bindPickerChange" value="{{index}}" range="{{selectList}}">
<view class="com-sTxt">
{{nowText}}
</view>
<image src='../../images/right.png' class='com-sImg' animation="{{animationData}}"></image>
</picker>
</view>
select.wxss
.com-selectBox{
width: 100%;
}
.com-sContent{
/* border: 1rpx solid #e2e2e2; */
background: white;
position: relative;
/* height: 30rpx;
line-height: 30rpx; */
text-align: right;
}
.com-sImg{
position: absolute;
right: 10rpx;
top: 11rpx;
width: 15rpx;
height: 20rpx;
transition: all .3s ease;
}
.com-sTxt{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding:0 20rpx 0 6rpx;
color: #999;
margin-right: 20rpx;
}
.com-sList{
right: 5%;
margin-top: 15rpx;
background: #F4F4F4;
width: 300rpx;
position: absolute;
border: 1rpx solid #e2e2e2;
border-radius: 5px;
border-top: none;
box-sizing: border-box;
z-index: 3;
max-height: 400rpx;
overflow: auto;
}
.com-sItem{
height: 70rpx;
line-height: 60rpx;
border-top: 1rpx solid #e2e2e2;
padding: 0 6rpx;
text-align: left;
margin-left: 20rpx;
margin-right: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #999;
}
.com-sItem:first-child{
border-top: none;
}
引用方式
1、在你需要調(diào)用的json文件里面加入
"usingComponents": {
"Select": "/components/select-picker/select"
}
2、wxml文件里面加入
<Select prop-arr
ay='{{dicts.sys_user_sex}}' isDisabled="{{!btnStatus}}" arrayKeyStr="dictValue" arrayValueStr="dictLabel" defalutKey="{{sex}}" selectColor="#36CBB7" id="sexSelect1"></Select>
屬性
prop-array：你的集合級，如：{'value':1,'lable':'男'}
isDisabled:：是否禁用 默認false
arrayKeyStr：你的集合里面用來顯示的值，如你的集合是{'value':1,'lable':'男'}，你就傳'value'
arrayValueStr：你的集合里面用來顯示的鍵，如你的集合是{'value':1,'lable':'男'}，你就傳'lable'
defalutKey：回顯時的值
selectColor：選項的字體顏色 如#000000
