商品分类左右联动滑动效果，点击按钮添加，再点击删除

最新推荐文章于 2024-07-11 19:07:39 发布

lovely you

最新推荐文章于 2024-07-11 19:07:39 发布

阅读量469

点赞数 1

文章标签：微信小程序 javascript

本文链接：https://blog.csdn.net/lovelyYou123/article/details/124454170

版权

本文介绍了一个微信小程序中的动态菜单设计，包括tab-group的切换和左侧分类菜单联动右侧商品列表。通过`wx:for`遍历实现选中项管理，并利用`scroll-view`实现滚动联动。关键代码展示了如何监听滚动事件调整左侧选中分类。

摘要由CSDN通过智能技术生成

首先是tab-group部分

<view class="tab-group">
    <view wx:for="{{checked}}" wx:key="id" class="tab">
      <view class="tabname">{{item.name}}</view>
      <view class="deleticon" bindtap="deleteTab" data-id="{{item.id}}"  data-parentId="{{item.parentID}}">x</view>
    </view>
  </view>

其次是分类部分

 <view class="menu">
    <view class="menu-l">
      <!-- 左侧tab菜单栏 -->
      <scroll-view scroll-with-animation="true" scroll-y="true" style="height:100%">
        <view wx:for="{{productList}}" wx:key="{{index}}" class="leftMenu {{currentTab == index?'active':''}}" bindtap="{{currentTab == index?'':'swichNav'}}" data-index="{{index}}" data-id="{{index}}">
          <text class="{{currentTab == index?'leftBorder':''}}"></text>
          {{item.name}}
        </view>
      </scroll-view>
    </view>

    <view class="menu-r">
      <!-- 右侧商品列表 -->
      <scroll-view scroll-with-animation="true" scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" bindscroll="scrollProductList">
        <block wx:for="{{productList}}" wx:key="id">
          <!-- id：实现点击左侧某分类时，右侧滚动至相应位置（注意：id不能以数字开头）-->
          <view id="nav{{index}}" class="product">
            <view class="title">{{item.name}}</view>
            <view class="menu-r-neirong">
              <view class="neirongTab {{Y.checked==true?'checked':''}}" wx:for="{{item.tradeBaseList}}" wx:key="{{index}}" wx:for-item="Y" bindtap="checked" data-name="{{Y.name}}" data-id="{{item.id}}" data-index="{{Y.id}}">
                {{Y.name}}
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>



import {request} from '../../../utils/server'
var heightList = [];//存放右侧分类的高度累加数组
var distanceToTop = 0;//记录scroll-view滚动过程中距离顶部的高度

Page({

  /**
   * 页面的初始数据
   */
  data: {
    curCheck: '',
    checked: [], //选中项
    currentTab: '',
    productList: [{
        title: '机械操作',
        list: [{
            id: '0',
            cateName: '塔吊/吊车/维修'
          },
          {
            id: '1',
            cateName: '塔吊/吊车/维修'
          },
          {
            id: '2',
            cateName: '塔吊/吊车/维修',

          }]
}]
      
     
    
},

  // 获取列表
  async getProductList() {
    await request({
      type: 1,
      url: '...'
    }).then(res => {
      console.log("list", res.data.data)
      let list = res.data.data;
      this.addChecked(list);
    })
  },
  // 给list上加一个字段checked
  addChecked(list) {
    let newlist = list;
    newlist.forEach(item => {
      for (let i = 0; i < item.tradeBaseList.length; i++) {
        item.tradeBaseList[i].checked = false;
      }
      // console.log("item",item)
    });
    console.log("listcheck", newlist)
    this.setData({
      productList: newlist
    })
  },

  // 左侧菜单栏切换事件
  swichNav: function (e) {
    let dataset = e.currentTarget.dataset;
    let id = dataset.id;
    this.setData({
      currentTab: id,
      toView: "nav" + id //不能数字开头，所以开头加了productItem
    });
  },
  /**
   * 获取商品列表高度
   * 计算右侧商品某分类的高度
   */
  getProListHeight() {
    let tmpHeightList = [];
    let tmpH = 0; //临时存放每个分类的高度
    // 获取元素信息 返回一个 SelectorQuery 对象实例
    const query = wx.createSelectorQuery()
    query.selectAll('.product').boundingClientRect()
    query.exec(function (res) {
      res[0].forEach((item) => {
        tmpH += item.height;
        // Math.floor()向下取整 【根据个人需要修改】
        tmpHeightList.push(Math.floor(tmpH));
      })
      heightList = tmpHeightList; //[386, 658, 930, 1202, ...]
      console.log(heightList);
    })
  },

  // 监听右边商品列表滑动
  scrollProductList(e) {
    let scrollTop = e.detail.scrollTop; //滚动位置
    let current = this.data.currentTab;
    console.log('scrollTop======>', scrollTop);
    console.log(e)
    if (scrollTop > distanceToTop) {
      //如果右侧 可视区域的竖直滚动位置 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
      if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
        this.setData({
          currentTab: current + 1
        })
      }
    } else {
      //如果右侧 可视区域的竖直滚动位置 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
      if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
        this.setData({
          currentTab: current - 1
        })
      }
    }
    //更新顶部的距离
    distanceToTop = scrollTop;
  },


  checked(e) {
    // console.log(e)
    let check = this.data.checked; //数组
    let list = this.data.productList;
    let id = e.currentTarget.dataset.id; //父节点id
    let sonId = e.currentTarget.dataset.index; //tradeBaseList子id
    let name = e.currentTarget.dataset.name; //tradeBaseList名字
    // console.log("list456", list)
    console.log("sonid", sonId);
    list.forEach(item => {
      if (item.id == id) {
        for (let i = 0; i < item.tradeBaseList.length; i++) {
          if (item.tradeBaseList[i].id == sonId) {
            item.tradeBaseList[i].checked = !item.tradeBaseList[i].checked;
          }
        }
      }
    });
    if (check.length > 0) {
      var flag = 0;
      check.map(function (w, i) {
        console.log("123", w)
        if (w.id == sonId) {
          console.log("123", sonId)
          check.splice(i, 1);
          console.log("移除之后", check)
          flag = 1;
        }
      });
      if (flag == 0) {
        check.push({
          id: sonId,
          name: name,
          parentID: id
        })
      }
    } else {
      check.push({
        id: sonId,
        name: name,
        parentID: id
      })
    }

    this.setData({
      productList: list,
      checked: check
    })
    console.log("checked", this.data.checked)
  },
  // 删除tab
  deleteTab(e) {
    console.log(e);
    let check = this.data.checked;
    let list = this.data.productList;
    let sonId = e.currentTarget.dataset.id;
    
    let parentId = e.currentTarget.dataset.parentid;
    list.forEach(item => {
      if (item.id == parentId) {
        for (let i = 0; i < item.tradeBaseList.length; i++) {
          if (item.tradeBaseList[i].id == sonId) {
            item.tradeBaseList[i].checked = !item.tradeBaseList[i].checked;
          }
        }
      }
    });
    console.log("delet", list)

    check.map(function (w, i) {
      console.log("123", w)
      if (w.id == sonId) {
        console.log("123", sonId)
        check.splice(i, 1);
        console.log("移除之后", check)

      }
    });

    console.log("delet", check)

    this.setData({
      checked: check,
      productList: list
    })
    // console.log("dianX后", this.data.checked)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getProductList()
    this.getProListHeight();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

https://blog.csdn.net/Smile_ping/article/details/108573294