今天我们来盘一下微信小程序当中从页面底部滑出的滚动选择器 picker组件
wxml
<view class="clist_header">
<view class="clist_main">
<view class='gu_topbo boxSizing'>
<view class='guinpBoxs'>
<image class='guinpImg' src='{{domainImg}}zhishiku_sousuo.png'></image>
<input class='guinputd' confirm-type='search' bindconfirm='keyboardSearch' bindinput="bindInput" name='inptxt' value="{{searchValue}}" bindfocus="bindFocus" type='text' placeholder='搜索'></input>
</view>
<button class='submitbtn' wx:if="{{searchBtnBleoon}}" form-type="submit">搜索</button>
<button class='submitbtn_close' catchtap="closeSearch" wx:else>取消</button>
</view>
<view class="clist_navbox boxSizing">
<view class="clist_navmain">
<picker mode="selector" header-text="招募状态" bindchange="bindPickerChangerecru" value="{{recruIndex}}" range-key="text" range="{{recruatatus}}">
<view class="clist_navitem boxSizing">
<view class="pickery">{{recruatatus[recruIndex].text}}</view>
<image class="clist_navicon" src="../../images/linchuangshiyan_xiala.png"></image>
</view>
</picker>
<picker mode="selector" header-text="试验分期" bindchange="bindPickerChangeteststage" value="{{teststageIndex}}" range-key="text" range="{{teststage}}">
<view class="clist_navitem boxSizing">
<view class="pickery">{{teststage[teststageIndex].text}}</view>
<image class="clist_navicon" src="../../images/linchuangshiyan_xiala.png"></image>
</view>
</picker>
<picker mode="multiSelector" header-text="试验地点" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{regionIndex}}" range="{{regionlist}}">
<view class="clist_navitem boxSizing">
<view class="pickery">
{{regionlist[1][regionIndex[1]]}}
</view>
<image class="clist_navicon" src="../../images/linchuangshiyan_xiala.png"></image>
</view>
</picker>
</view>
</view>
</view>
</view>
然后添加点wxss修饰下
wxss
.clist_header{
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
}
.clist_main{
width: 100%;
margin: 0 auto 12rpx;
background: #ffffff;
box-shadow: 0 4rpx 12rpx 0 rgba(245,245,245,1);
}
.gu_topbo{
padding: 12rpx 32rpx 24rpx;
}
.submitbtn{
text-align: center;
background: #fff;
font-size:28rpx;
font-weight:400;
color:#53CF98;
padding: 0;
margin: 0;
}
.submitbtn_close{
text-align: center;
background: #fff;
font-size:28rpx;
font-weight:400;
padding: 0;
margin: 0;
color:rgba(157,168,178,1);
}
.submitbtn::after,
.submitbtn_close::after{
border: none;
margin: 0;
padding: 0;
}
.clist_navbox{
width: 100%;
margin: 0 auto;
padding: 0 28rpx;
}
.clist_navmain{
width: 100%;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
align-items: center;
}
.clist_navmain picker{
-webkit-box-flex: 1;
flex: 1;
width: 100%;
}
.clist_navitem{
-webkit-box-flex: 1;
flex: 1;
width: 100%;
height: 100rpx;
padding: 12rpx 15rpx;
display: -webkit-box;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(31,44,58,1);
line-height: 40rpx;
text-align: left;
}
.pickery{
-webkit-box-flex: 1;
flex: 1;
width: 100%;
}
.clist_navicon{
width: 20rpx;
height: 12rpx;
margin-left: 10rpx;
}
最后就开始我们的JS逻辑编写了
js
Page({
/**
* 页面的初始数据
*/
data: {
clistNavList: [ //nav数据
{
flag: false,
text: "招募状态"
},
{
flag: false,
text: "试验分期"
},
{
flag: false,
text: "试验地点"
}
],
recruatatus: [ //招募状态
{
flag: false,
text: "全部状态"
},
{
flag: false,
text: "尚未招募"
},
{
flag: false,
text: "招募中"
},
{
flag: false,
text: "完成招募"
},
{
flag: false,
text: "停止招募"
},
{
flag: false,
text: "撤回招募"
},
{
flag: false,
text: "暂停"
},
],
recruIndex: 0, //招募默认显示
teststage: [
{
flag: false,
text: "全部分期",
},
{
flag: false,
text: "Ⅰ期试验",
},
{
flag: false,
text: "Ⅱ期试验",
},
{
flag: false,
text: "Ⅲ期试验",
},
{
flag: false,
text: "Ⅳ期试验",
},
],
teststageIndex: 0, //分期默认显示
regionlist: [["全部地区","国内","国外"],["全部地区"]],
domesticList: ["国内地区1","国内地区2","国内地区3","国内地区4","国内地区5","国内地区6","国内地区7"],
foreignList: ["国外地区1","国外地区2","国外地区3","国外地区4","国外地区5","国外地区6","国外地区7"],
regionIndex: [0, 0],//国家默认显示
regionIndexy: [0,0],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//切换状态
bindPickerChangerecru: function (e) {
var that = this;
that.setData({
recruIndex: e.detail.value,
})
},
//切换分期
bindPickerChangeteststage: function (e){
var that = this;
that.setData({
teststageIndex: e.detail.value,
})
},
//切换地区
bindMultiPickerChange: function (e) {
var that = this;
that.setData({
regionIndexy: e.detail.value,
regionIndex: e.detail.value,
})
},
bindMultiPickerColumnChange: function (e) {
console.log("修改数据：",e,'修改的列为', e.detail.column, '，值为', e.detail.value);
var that = this;
var data = {
regionlist: that.data.regionlist,
regionIndexy: that.data.regionIndexy,
};
data.regionIndexy[e.detail.column] = e.detail.value;
that.setData(data)
switch (e.detail.column) {
case 0:
switch (data.regionIndexy[0]) {
case 0:
data.regionlist[1] = ["全部地区"];
break;
case 1:
data.regionlist[1] = that.data.domesticList;
break;
case 2:
data.regionlist[1] = that.data.foreignList;
break;
}
data.regionIndexy[1] = 0;
break;
}
that.setData(data);
},
})
好了 这样就可以完美的展示滚动选择器了。
欢迎收藏 微信小程序系列
————————————————
版权声明：本文为CSDN博主「前端小张」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/qq_37949737…
