pika_shangjia/pages/fenlei/fenlei.vue

<template>
<view>
<!--pages/fenlei/fenlei.wxml-->
<scroll-view scroll-y="true" class="left" :style="'bottom:' + (bottomBlankHeignt + 115) + 'rpx'">
  <block v-for="(item, index) in categorys" :key="index">
  <view :class="'li ' + (current == index ? 'active' : '')" :data-index="index" @tap="toScrollView" :data-id="item.id">{{item.title}}</view>
  </block>
</scroll-view>
<scroll-view scroll-y="true" class="right" :style="'height:' + scrollHeight + 'px;'" :scroll-into-view="toView" scroll-top="0" @scroll="scrollTo" scroll-with-animation="true">
  <view class="rcon">
    <view v-for="(cats, idx) in categorys" :key="idx" :id="'position' + idx">
      <view class="tit">{{cats.title}}</view>
      <view class="list dflex">
        <view v-for="(item, index) in cats.nodes" :key="index" class="li" @tap="goUrl" :data-url="'product/list/list?id=' + item.id + '&title=' + item.title">
          <image :src="item.icon"></image>
          {{item.title}}
        </view>
      </view>
    </view>
  </view>
</scroll-view>


<foot channel="sort"></foot>
</view>
</template>

<script>
// pages/fenlei/fenlei.js
const app = getApp();
const req = require("../../utils/request.js");
let scrollDdirection = 0; // 用来计算滚动的方向
import foot from "../../components/nav-bar/index";

export default {
  data() {
    return {
      bottomBlankHeignt: app.globalData.isIPhoneX ? 68 : 0,
      categorys: [],
      //产品一级分类列表
      current: 0,
      scrollTop: 0,
      scrollHeight: 0,
      // 滚动视图的高度
      toView: 'position0',
      // 滚动视图跳转的位置
      scrollInfo: [],
      isload: false,
      _key: ""
    };
  },

  components: {
    foot
  },
  props: {},
  onLoad: function (options) {
    this.category();
    uni.getSystemInfo({
      success: res => {
        this.setData({
          scrollHeight: res.windowHeight - 136 * res.windowWidth / 750
        });
      }
    });
  },
  methods: {
    category() {
      //产品分类
      let that = this;
      req.getRequest('/api/category/list', {
        page: 1,
        size: 1000
      }, res => {
        if (res) {
          let array = [];
          res.map(item => {
            if (item.pid == 0) {
              array.push(item);
            }
          });
          /*右边数据*/

          array.forEach(elm => {
            var twoArray = [];
            res.forEach(function (elm2, idx) {
              if (elm2.pid == elm.id) {
                twoArray.push(elm2);
              }
            });
            elm.nodes = twoArray;
          });
          that.setData({
            categorys: array
          });
          setTimeout(() => {
            that.lisenerScroll();
          }, 100);
        }
      });
    },

    goUrl(e) {
      app.globalData.openPage(e.currentTarget.dataset.url);
    },

    toScrollView(e) {
      const {
        index
      } = e.currentTarget.dataset;
      this.setData({
        current: index,
        toView: `position${index}`
      });
    },

    /**
     * 获取右边每个分类的头部偏移量
     */
    lisenerScroll() {
      // var _ts=this;

      /* setTimeout(() => {
         _ts.setHeight(0);
       }, 10000);*/
      // 获取各分类容器距离顶部的距离
      new Promise(resolve => {
        let query = uni.createSelectorQuery();
        var clength = this.categorys.length;

        for (var k = 0; k < clength; k++) {
          query.select(`#position${k}`).boundingClientRect();
        }

        query.exec(function (res) {
          resolve(res);
        });
      }).then(res => {
        var categorys = this.categorys;

        if (res.length == categorys.length) {
          categorys.forEach((item, index) => {
            item.offsetTop = res[index].top;
          });
          this.setData({
            scrollInfo: res,
            categorys: categorys
          });
        }
      });
    },

    setHeight(k) {
      var _ts = this;

      if (_ts.isload) {
        return;
      }

      _ts.isload = false;
      let query = uni.createSelectorQuery();
      query.select(`#position${k}`).boundingClientRect();
      query.exec(function (res) {
        // console.log(res);

        var _key = "categorys[" + k + "].offsetTop";

        _ts.setData({
          [_key]: res[0].top
        });

        _ts.isload = true;
      });
    },

    /**
     * 监听滚动条滚动事件
     */
    scrollTo(e) {
      const scrollTop = e.detail.scrollTop; //滚动的Y轴

      const {
        current,
        categorys
      } = this;

      if (scrollDdirection < scrollTop) {
        // 向上滑动
        scrollDdirection = scrollTop; // 计算偏移位置
        //  console.log(current, scrollTop,categorys[current + 1].offsetTop);

        if (current < categorys.length - 1 && scrollTop >= categorys[current + 1].offsetTop) {
          // console.log("chua");
          this.setData({
            current: current + 1
          });
        }
      } else {
        // 向下滑动
        scrollDdirection = scrollTop; // 计算偏移位置

        if (current > 0 && scrollTop < categorys[current].offsetTop && scrollTop > 0) {
          this.setData({
            current: current - 1
          });
        }
      }
    }

  }
};
</script>
<style>
@import "./fenlei.css";
</style>