小程序自定义下拉多列选择器
2018-08-29 本文已影响0人
柏龙
scroll-view 可滚动视图区域 , picker 滚动选择器
下拉多列选择器
wxml 代码
<view class="section">
<view class='sel'>
<view bindtap="togglePicker" data-id="0" class="picker {{ isChange && pickerId == 0 ? 'active' : ''}}">{{ defaultCatName }}
<text class='triangle'></text>
</view>
</view>
<view class='sel'>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" bindtap="togglePicker" data-id="1" value="{{multiIndex}}" range="{{ multiArray }}">
<view class="picker {{ isChange && pickerId == 1 ? 'active' : ''}}">
{{curYear.name}}{{curMonth.name}}
<text class='triangle'></text>
</view>
</picker>
</view>
<!-- 左边 -->
<view class="rank-active {{ isChange && pickerId == 0 ? 'active' : ''}}">
<view class='scroll-list'>
<scroll-view scroll-y="true" scroll-with-animation="true">
<view wx:for="{{categroryList}}" wx:key="index" data-id="{{item.id}}" class="{{ leftCatId === item.id ? 'active' : ''}}" bindtap="leftCatId">
{{ item.catName }}
</view>
<!-- class='active' -->
</scroll-view>
<scroll-view scroll-y="true" scroll-with-animation="true">
<view wx:for="{{ categroryChildrenObject[leftCatId].children }}" wx:key="index" bindtap='selectCatId' data-id="{{item.id}}" data-name="{{item.catName}}" class="{{ catId === item.id ? 'active' : ''}}">
{{ item.catName }}
</view>
</scroll-view>
</view>
<view class='button'>
<view data-id="3" bindtap="clearRankActive">取消</view>
<view bindtap="submitSelect" data-id="3">确认</view>
</view>
</view>
</view>
wxss 代码
.section{
line-height: 82rpx;
border-top: 2rpx solid #F2F3F5;
border-bottom: 2rpx solid #F2F3F5;
display: flex;
justify-content: space-between;
box-sizing: content-box;
position: relative;
}
.sel{
padding: 0 60rpx 0 30rpx;
font-size: 32rpx;
color: #3F4552;
}
.picker{
position: relative;
}
.triangle{
display: block;
width: 20rpx;
height: 12rpx;
position: absolute;
top: 46%;
right: -30rpx;
transition: transform .2s ease-in;
}
.triangle::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-left: 10rpx solid transparent;
border-top: 10rpx solid #9FA8B7;
border-right: 10rpx solid transparent;
}
.triangle:after {
content: "";
position: absolute;
top: 0;
right: 2rpx;
width: 0;
height: 0;
border-left: 8rpx solid transparent;
border-top: 8rpx solid #fff;
border-right: 8rpx solid transparent;
}
.picker.active{
color: #3A78FF;
}
.picker.active .triangle{
transform: rotate(180deg);
}
.picker.active .triangle::before{
border-top: 10rpx solid #3A78FF;
}
.rank-active{
width: 100%;
position: absolute;
top: 80rpx;
background: #fff;
display: none;
transition: all .2s;
}
.rank-active.active{
display: block;
}
.rank-active .scroll-list{
display: flex;
justify-content:space-between;
box-sizing: border-box;
border-top: 2rpx solid #F2F3F5;
border-bottom: 2rpx solid #f2f3f5;
}
.rank-active .scroll-list scroll-view{
height: 371rpx;
padding: 0 30rpx;
}
.rank-active .scroll-list scroll-view:nth-child(2){
background: #f9f9f9;
}
.rank-active .scroll-list scroll-view view{
line-height: 90rpx;
color: #3f4552;
font-size: 30rpx;
border-bottom: 2rpx solid #efefef;
}
.rank-active .scroll-list scroll-view view.active{
color: #3a78ff;
}
.rank-active .scroll-list scroll-view view:last-child{
border-bottom: none;
}
.button{
display: flex;
justify-content:space-between;
box-sizing: border-box;
padding: 0 30rpx;
line-height: 98rpx;
font-size: 32rpx;
color: #9fa8b7;
}
.button view:last-child{
color: #3a78ff;
}
.rank-active-bg{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .7);
display: none;
}
.rank-active-bg.active{
display: block;
}
js 代码
Page({
/**
* 页面的初始数据
*/
data: {
pickerId: 0,
month: [],
curMonth: {},
monthData: [],
multiArray: [],
multiIndex: [0, 0],
isChange: false,
showLoading: false,
categroryList: [], // 左边列表
categroryChildrenObject: {}, // 字典数据
leftCatId: 1, // 左边的ID
catId: 100, // 右边的ID
activeCatName: '', // 选着时的 title
defaultCatName: '', // 提交时的 title
},
togglePicker: function (e) {
this.setData({
pickerId: e.currentTarget.dataset.id,
isChange: true
})
},
clearRankActive: function (e) {
this.setData({
pickerId: e.currentTarget.dataset.id,
isChange: true,
})
},
bindPickerCancel: function (e) { //取消选中
this.setData({
pickerId: e.currentTarget.dataset.id,
isChange: false
})
},
bindDateChange: function (e) {
this.setData({
isChange: false,
date: e.detail.value
})
},
fetchMonth: function () {
this.setData({
showLoading: true,
})
var monthData = [{ "id": 1, "name": "2018年", "children": [{ "id": 101, "name": "1-6月", "dir": "0106" }, { "id": 102, "name": "7月", "dir": "07" }, { "id": 103, "name": "8月", "dir": "08" }, { "id": 104, "name": "9月", "dir": "09" }, { "id": 105, "name": "10月", "dir": "10" }] }];
//
let years = [], yearNameArray = [], month = [], monthIdArray = [], monthNameArray = []
monthData.forEach(item => {
years.push(item)
yearNameArray.push(item.name)
if (item.children) {
item.children.forEach(item1 => {
month.push(item1)
monthIdArray.push(item1.id)
monthNameArray.push(item1.name)
})
}
})
let curYear = years.slice().pop()
let curMonth = month.slice().pop()
// console.log('curMonth', curMonth)
var multiArray = [yearNameArray, monthNameArray]
this.setData({
multiIndex: [0, month.length - 1],
multiArray,
// month,
monthData,
monthIdArray,
monthNameArray,
curYear,
curMonth
})
this.fetchCategory()
},
bindMultiPickerChange: function (e) {
console.log('提交月份', e)
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
let mid = e.detail.value
this.setData({
curMonth: {
id: this.data.monthIdArray[mid],
name: this.data.monthNameArray[mid]
}
})
},
fetchCategory: function () {
let categoryData = [{ "id": 1, "catName": "新媒体", "children": [{ "id": 100, "catName": "影响力" }, { "id": 101, "catName": "排行榜" }, { "id": 102, "catName": "最佳榜" }, { "id": 103, "catName": "运营榜" }] }, { "id": 2, "catName": "自媒体", "children": [{ "id": 200, "catName": "新媒体风云榜" }, { "id": 201, "catName": "推荐阅读榜" }, { "id": 202, "catName": "内容提升榜" }] }, { "id": 3, "catName": "热词", "children": [{ "id": 300, "catName": "热词榜" }, { "id": 301, "catName": "板块热词榜" }, { "id": 302, "catName": "区域热词榜" }, { "id": 303, "catName": "政策热词榜" }, { "id": 304, "catName": "争议榜" }] }]
// 获取分类数据
let catList = [], catChildrenObject = {}
categoryData.map((item, index) => {
catList.push({
id: item.id,
catName: item.catName
})
catChildrenObject[item.id] = item
})
// console.log('catList', catList, 'catChildrenObject', catChildrenObject)
// 默认title 和 激活的id
let rightActive = catChildrenObject[catList[0].id].children[0]
this.setData({
categroryList: catList,
categroryChildrenObject: catChildrenObject,
leftCatId: catList[0].id, // 左边的ID
catId: rightActive.id, // 右边的ID
defaultCatName: rightActive.catName,
})
},
/**
*
* 左边默认的ID
* 默认选着左边 右边选中
* 在提交时默认给到 当前激活的name
*/
leftCatId: function (e) {
let leftCatId = e.currentTarget.dataset.id
let catId = this.data.categroryChildrenObject[leftCatId].children[0].id
let activeCatName = this.data.categroryChildrenObject[leftCatId].children[0].catName
this.setData({
leftCatId,
catId,
activeCatName
})
console.log('leftCatId', leftCatId, 'catId', catId, 'activeCatName', activeCatName)
},
/**
*
* 右边选择 id 当前激活的 name
*/
selectCatId: function (e) {
let catName = e.currentTarget.dataset.name
let catId = e.currentTarget.dataset.id
this.setData({
catId: catId,
activeCatName: catName
})
console.log('catId', catId, 'catName', catName)
},
/**
*
* 确认提交 当前选中的 name
*/
submitSelect: function (e) {
this.setData({
defaultCatName: this.data.activeCatName,
isChange: false
})
console.log('activeCatName', this.data.activeCatName)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.fetchMonth()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
