在小程序中 没有使用 html 标签中的 select 下拉框
但项目要实现这个功能 只能自己动手敲
在文件 的根目录下 新建 components 文件夹
建立一个select 的文件夹 右键 点击新建Component 然后会自动生成这四个文件
然后开始写 组件内容
// select.wxml 文件下
<!--componet/select/select.wxml-->
<view class='com-selectBox'>
<view class='com-sContent' bindtap='selectToggle'>
<view class='com-sTxt'>{{nowText}}</view> // 要显示的内容
<image src='/imgs/icon-left-jt.png' class='com-sImg' animation="{{animationData}}"></image> //
</view>
<view class='com-sList' wx:if="{{selectShow}}"> // 显示的列表内容
<view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='com-sItem' bindtap='setText'>{{item.text}}</view>
</view>
</view>
// select.js 文件下
// 第一步 在组件的属性列表
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.rotate(0).step();
this.setData({
selectShow: false,
nowText:nowText,
animationData: this.animation.export()
})
var nowDate={
id:nowIdx,
text:nowText
}
this.triggerEvent('myget', nowDate)
}
// select.json 文件下
{
"component": true, //确认开启
"usingComponents": {}
}
/* select.wxss 文件下 */
/* componet/select/select.wxss */
.com-selectBox{
width: 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;
width: 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;
width: 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;
}
在父级中使用
例如想在pages 下面的index文件中去使用这个组件 需要先在 index.json 下面去添加组件
{
"usingComponents": {
"Select" : "/components/select/select"
}
}
<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>
这里我先自己模拟了数据
data: {
selectArray: [
{id: '1', text: '会计类'},
{id: '2', text: '工程类'},
{id: '3', text: '会计类'},
{id: '4', text: '工程类'},
{id: '5', text: '会计类'},
{id: '6', text: '工程类'},
{id: '7', text: '会计类'},
{id: '8', text: '工程类'},
{id: '9', text: '会计类'},
{id: '10', text: '工程类'}
]
},
然后 大功告成 了
这里 css 做了限制固定的宽度 所以 显示4个
页面上点击如何获取 选中的信息 因为之前给子组件自定义事件 了
所以 在父组件使用 需要传递一个值