自定义微信小程序下拉选择框组件
预览效果图:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
========================================================
首先要新建一个组件
1.在想要的位置上新建一个目录
2.在该目录中 右键 → 新建一个Component
工具会自动生成四个文件(无视assets,那是我放图片的地方)
其中我们一般修改 .js .wxml .wxss
文件
3.观察select.json
文件
“component”: true 这句话表示这个目录是作为一个组件的,可以给别的目录用
========================================================
开始编码
selector.wxml
<view class='selectBox'>
<view class='select' catchtap='selectTap'>
<text class='select_text'>{{selectData[index]}}</text>
<image class='select_img {{selectShow&&"select_img_rotate"}}'
src='../selector/assets/jiantou.jpg'
background-size="contain">
</image>
</view>
<view class='optionBox'
style='height:300rpx;'>
<text class='option'
wx:for='{{selectData}}'
wx:key='this'
data-index='{{index}}'
catchtap='optionTap'>{{item}}
</text>
</view>
</view>
========================================================
selector.wxss(要改的样式可以自己改)
.selectBox{ height:1.5rem;border:2px solid black;border-radius: 20rpx; position: relative; padding-left: 10rpx}
.selectBox .select{ box-sizing: border-box; width: 100%; height: 100%; border-radius: 8rpx; display: flex; align-items: center; padding: 0 10rpx; }
.selectBox .select .select_text{ font-size: 35rpx; color:black; line-height: 28rpx; flex: 1; }
.selectBox .select .select_img{ width: 30rpx; height: 30rpx; display: block; transition:transform 0.3s; }
.selectBox .select .select_img_rotate{ transform:rotate(180deg); }
.selectBox .optionBox{ position: absolute; top: calc(100%); width: 100%; box-sizing: border-box; height: 0; overflow-y: auto; background: #fff; transition: height 0.3s; border-left:2px solid black; border-right:2px solid black;border:1px solid black ;z-index:9999}
.selectBox .optionBox .option{ display: block; line-height: 50rpx; font-size: 35rpx; border-top: 2px solid black; padding: 10rpx;z-index:9999;}
=======================================================
selector.js
Component({
/**
* 组件的属性列表
*/
properties: {
selectData: { //下拉列表的数据
type: Array,
value: [] //初始数据,可通过属性修改
},
},
/**
* 组件的初始数据
*/
data: {
selectShow: false,//控制下拉列表的显示隐藏,false隐藏、true显示
index: 0,//选择的下拉列表下标
},
/**
* 组件的方法列表
*/
methods: {
selectTap() {
this.setData({
selectShow: !this.data.selectShow
});
},
optionTap(e){
let Index=e.currentTarget.dataset.index;
this.setData({
index:Index,
selectShow:!this.data.selectShow
});
}
}
})
========================================================
扫描二维码关注公众号,回复:
3302182 查看本文章
![](/qrcode.jpg)
定义完了组件,开始使用
1.首先在要使用的地方的.json
文件中声明用到了该组件
{
"usingComponents": {
"selector":"/pages/selector/selector"
}
}
2.直接使用组件标签(selectData定义为属性,可以自定义可选的列表)
<selector selectData="{{position}}"></selector>
OK,大功告成!
附上我的箭头图片 ↓↓↓↓