需求:微信小程序有个picker组件,却没有h5中的select。此组件应景而生。
**
自定义select
:**
JSON:
{
"component": true,
"usingComponents": {}
}
WXML:
<view class='width-100p'style="position:relative">
<view class=' selectParent' catchtap='showItemData'>
<text class='flex-1'>{{selectItemContent}}</text>
<image class='image' src='http://nsr.9hive.cn/global/minprogram/jnby/icon_item.svg' style='transform:rotate(90deg)'></image>
</view>
<view class='selectContainer' hidden="{{showDropItem}}">
<block wx:for="{{itemList}}" wx:for-item="selectItem" wx:for-index="selectItemIndex" wx:key="selectItemIndex">
<view class='selectItem' data-selectItem="{{selectItem}}" catchtap='selectItem'>{{selectItem.name}}</view>
</block>
</view>
<!-- <view class='shade'></view> -->
</view>
WXJS:
Component({
properties: {
itemList: {
type: Array,
value: "",
observer: function (newVal, oldVal) { }
},
},
data: {
showDropItem: true,
selectItemContent: "请选择"
},
methods: {
showItemData() {
this.setData({
showDropItem: !this.data.showDropItem
})
},
selectItem(e) {
// console.log(e)
let item = e.currentTarget.dataset.selectitem;
this.setData({
showDropItem: true,
selectItemContent: item.name
})
this.triggerEvent("selectItem", item);//自定义方法,传值。传到使用页面时,通过e.detail拿取
}
}
})
调用方法:
在需要调用的页面JSON里配置组件路径及名称:
{
"navigationBarTitleText": "不止盒子",
"usingComponents": {
"component-select":"../select/select"
}
}
页面中使用