微信小程序如何实现select二级下拉
本篇内容主要讲解“微信小程序如何实现select二级下拉”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序如何实现select二级下拉”吧!
xiala.wxml
<!-- 列表选择 -->
<view class="list" hover-class="none" hover-stop-propagation="false">
<text class="listText dd">3.请选择门店</text>
<view class="box" hover-class="none" hover-stop-propagation="false">
<view class='select_box'>
<view class='select' catchtap='dianTap'>
<input type="number" class='select_text' disabled="true" adjust-position="flase"
value="{{dian[index]}}" name="lie" />
<image class='select_img {{dianShow&&"select_img_rotate"}}' src='/pages/image/b2.png'
background-size="contain"></image>
</view>
<view class="option_bbox" hover-class="none" hover-stop-propagation="false">
<view class='option_box' style='height:{{dianShow?(area.length>5?325:dian.length*70):0}}rpx;'>
<text class='option' wx:for='{{area}}' wx:key='this' data-index='{{index}}' data-aid='{{item.id}}' catchtap='areaId'>{{item.name}}</text>
</view>
<view class='option_box' style='height:{{dianShow?(dian.length>5?325:dian.length*70):0}}rpx;'>
<text class='option' wx:for='{{dian}}' wx:key='this' data-index='{{dian}}' catchtap='optionTap'>{{item}}</text>
</view>
</view>
</view>
</view>
</view>js页面
// pages/xiala/xiala.js
Page({
/**
* 页面的初始数据
*/
data: {
liebiao:[],
price:[],
index:0,
area:[],
areaId:'',
dian:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.area();
},
// 获取区域
area(){
var that = this;
wx.request({
url: 'xxxxxx',
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
let area = res.data.data;
let obMut = [];
let areaId;
for(var i=0; i<area.length;i++){
areaId = area[0].id;
obMut.push({id:area[i].id,name:area[i].name});
}
that.setData({
areaId:areaId,
area:obMut
})
// console.log(that.data.areaId)
that.dian();
}
})
},
// 点击改变区id
areaId(e){
var that = this;
that.setData({
areaId: e.currentTarget.dataset.aid,
})
that.dian();
},
// 获取店
dian:function(){
let that = this;
let idx =that.data.areaId;
let area = that.data.area;
console.log(area)
area.forEach((item, index) => {
if (idx === item.id) {
item.status = true
wx.request({
url: 'xxxxxxx',
dataType: 'json',
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
aid: item.id
},
success(res) {
// console.log(res)
let fmutA = that.data.fmutA;
if (res.data.status === 1) {
console.log(res.data.shop)
let dian = res.data.shop;
let fDian = [];
for(var i=0; i<dian.length;i++){
fDian[i] = dian[i].name;
}
console.log(fDian)
that.setData({
dian: fDian,
})
}
}
})
}else{
item.status = false
}
})
},
// 点击下拉显示框
dianTap() {
this.setData({
dianShow: !this.data.dianShow
});
},
// 点击下拉列表
optionTap(e) {
let Index = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
this.setData({
index: Index,
dianShow: !this.data.dianShow
});
}
})wxss页面
/* 列表 */
/* pages/map/map.wxss */
.select_box{
width: 63%;
height:70%;
border-radius: 14rpx;
position: relative;
}
.select_box .select{
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 8rpx;
display: flex;
align-items: center;
}
.select_box .select .select_text{
color: #777777;
line-height: 28rpx;
flex: 1;
}
.select_box .select .select_img{
width: 20rpx;
height: 20rpx;
display: block;
transition:transform 0.3s;
position: absolute;
right: 25rpx;
}
.select_box .select .select_img_rotate{
transform:rotate(180deg);
}
.select_box .option_box{
position: absolute;
top: calc(100% - 1px);
width: 100%;
box-sizing: border-box;
height: 0;
overflow-y: auto;
background: #fff;
transition: height 0.3s;
border: 1px solid #efefef;
border-right: 1px solid #efefef;
background: #fcfcfc;
}
.select_box .option_box .option{
display: block;
line-height: 38rpx;
font-size: 9pt;
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 10rpx;
}
.option_bbox{
display: flex;
justify-content: row;
}
.select_box .option_box {
position: relative;
}到此，相信大家对“微信小程序如何实现select二级下拉”有了更深的了解，不妨来实际操作一番吧！这里是蜗牛博客网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论