美文网首页
小程序自定义下拉多列选择器

小程序自定义下拉多列选择器

作者: 柏龙 | 来源:发表于2018-08-29 15:10 被阅读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 () {
    
      }
    })
    

    相关文章

      网友评论

          本文标题:小程序自定义下拉多列选择器

          本文链接:https://www.haomeiwen.com/subject/cjfkwftx.html