今天咱们来盘一下微信小程序当中从页面底部滑出的滚动选择器 picker组件javascript
wxmlcss
<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修饰下html
wxssjava
.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逻辑编写了web
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); }, })
好了 这样就能够完美的展现滚动选择器了。微信小程序
欢迎收藏 微信小程序系列微信