此博客链接:https://www.cnblogs.com/ping2yingshi/p/13191421.html
右键这个文件夹,新建下面的这个Component。然后输入需要创建的名称,我这里为了方便就取了select的名字。然后就会自动创建4个文件,js、json、wxml、wxss。
组件样式
组件的wxml
<view class='com-selectBox'> <view class='com-sContent' bindtap='selectToggle'> <view class='com-sTxt'>{{nowText}}</view> <image src='../../public/img/local/down.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>
组件的js
// Componet/Componet.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;//当前点击的内容
//再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
this.animation.rotate(0).step();
this.setData({
selectShow: false,
nowText:nowText,
animationData: this.animation.export()
})
var nowDate={
id:nowIdx,
text:nowText
}
this.triggerEvent('myget', nowDate)
}
}
})
组件的wxss
.com-selectBox{ 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; 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; 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; }
引入组件(下面代码都是在你要加入组件的额页面中添加)
1,在你引入组件的页面的json文件中配置
"usingComponents": { "Select": "/Componet/select/select" }
2.在wxml中需要引入的位置插入下面代码
<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>
3.在js中插入
selectArray: [{ "id": "0", "text": "100ml" }, { "id": "1", "text": "200ml" }, { "id": "2", "text": "300ml" }, { "id": "3", "text": "400ml" }, { "id": "4", "text": "500ml" }, { "id": "5", "text": "1000ml" }, { "id": "6", "text": "1500ml" }, { "id": "7", "text": "2000ml" },
通信
你加入组件的页面wxml中,插入的下面代码是用来对组件的数据进行绑定。
<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>
在你加入组件的页面js中,加入的新函数是为了获取选择的值。(需要复制下面代码),你可以在下面这个函数中,对选择的值做处理。
getDate:function(e){
console.log(e.detail)
}
效果如下
参考链接:https://www.cnblogs.com/zjjDaily/articles/9548433.html
备注:上面链接中的博主写的真不错,值得一看,我没有写代码的解释,想了解的可以看看。