1.vant weapp虽然给我们提供了van-dropdown-item且美观的组件但是没有插槽无法自定义内容，限制了各位大神的操作，接下来我们先来了解他的使用在去封装自己的自定义
//json
"usingComponents": {
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index"
}
//html
van-dropdown-menu>
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>
Page({
data: {
option1: [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 },
],
option2: [
{ text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' },
],
value1: 0,
value2: 'a',
},
});
这是官方自己的效果！
下面来看看我们自己封装的组件
2.还能自定义搜索框等等是不是很奈斯！文章来源：https://www.toymoban.com/news/detail-673402.html
接下来我们在components目录新建文件夹deopdown-pirck，这样没用页面都能直接使用了需要在j页面son注册文章来源地址https://www.toymoban.com/news/detail-673402.html
// components/deopdown-pirck/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
index: {
type: String
},
options: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
imgurl: '../../images/mine/downl.png',
isshow: false, //是否弹层
height: 812 + 'px',
value: '',
title: '',
indexs: 0,
optionss: [], //传递过来的
repoptionss: [] //用于显示过滤的
},
created() {
var res = wx.getSystemInfoSync()
this.setData({
height: res.screenHeight + 'px'
})
},
created() {
console.log(this.properties.options)
},
/**
* 组件的方法列表
*/
methods: {
onopent() {
this.setData({
isshow: !this.data.isshow
})
},
opselect(e) {
let {
id
} = e.currentTarget.dataset
let textindex=null
let datafilter=this.data.optionss
datafilter.forEach((item,idnex)=>{
if (item.value == id) {
textindex = item.text
}
})
this.setData({
indexs: id,
title: textindex,
isshow: !this.data.isshow
})
let index_id = 0
let fildata = this.data.optionss
console.log(id,fildata)
console.log("选择项")
fildata.forEach((item, index) => {
if (item.value === id) {
index_id = item.value
console.log("检测匹配项",item.value)
}
})
this.triggerEvent('childFun', {
id: index_id
}); //通知父组件处理返回的选中数据
},
opsoce(){
this.setData({
isshow:false
})
},
seachchange(e) {
this.setData({
value: e.detail,
});
let filtertext = []
this.data.optionss.forEach((item) => {
if (item.text.indexOf(e.detail) != -1) {
filtertext.push(item)
}
})
this.setData({
repoptionss: filtertext
})
}
},
observers: {
'index,options': function (nn1, nn2) {
console.log("原始数据")
console.log(nn1)
console.log(nn2)
let indextile = null
nn2.forEach((item, index) => {
if (item.value == nn1) {
indextile = item.text
}
})
this.setData({
indexs: nn1,
optionss: nn2,
repoptionss: nn2,
title: indextile
})
}
}
})
<!--components/deopdown-pirck/index.wxml-->
<view class="drow" bindtap="onopent">
<text>{{title}}</text>
<image src="{{isshow===true? '../../images/mine/upl.png':'../../images/mine/downl.png'}}" class="imgseze" style="height: 30rpx;width: 30rpx;"/>
</view>
<view class="pupo" style="min-height:{{height}}" wx:if="{{isshow}}" catchtap="opsoce">
<van-search value="{{ value }}" placeholder="请输入关键名称" bind:change="seachchange" />
<view wx:for="{{repoptionss}}" wx:key="{{index}}" class="{{item.value==indexs? 'itemles':'itemle'}}" data-id="{{item.value}}" bindtap="opselect">
<text>{{item.text}}</text>
<image src="../../images/mine/select.png" wx:if="{{item.value==indexs}}" />
</view>
</view>
/* components/deopdown-pirck/index.wxss */
.drow{
display: flex;
align-items: center;
font-weight: bold;
}
.drow image{
height: 30rpx;
width: 30rpx;
margin-left: 5rpx;
}
.pupo{
position: absolute;
width: 100vw;
background-color: rgba(0,0,0,0.5);
z-index: 99999;
left: 0rpx;
overflow:scroll;
}
.itemle{
height: 65rpx;
width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
background: white;
padding: 10rpx 25rpx;
z-index: 99;
}
.itemles{
height: 65rpx;
width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
background: white;
padding: 10rpx 25rpx;
z-index: 99;
color: #1eaaa9;
}
.pupo image{
height: 35rpx;
width: 40rpx;
margin-right:55rpx;
}
到了这里，关于微信小程序封装自定义van-dropdown-item 下拉选择框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
