devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue/vant第左右联动better-scroll效果实现（完整版）_vant 引用better-scroll

作者：小小林熬夜学编程 | 2024-03-27 17:25:42

赞

踩

vant 引用better-scroll

先看完整代码： 

  1. <template>
  2.   <div>
  3.     <!-- 头部 -->
  4.     <van-sticky :offset-top="0">
  5.       <div class="header">
  6.         <van-icon name="chat-o" class="icon-one" />
  7.         <van-search
  8.           @click="search"
  9.           placeholder="请输入搜索关键词"
  10.           class="sousuo"
  11.         />
  12.         <van-icon name="scan" class="icon-two" />
  13.       </div>
  14.     </van-sticky>
  15.     <!-- section部分 -->
  16.  
  17.     <section class="section" ref="sec">
  18.       <div class="left" ref="left">
  19.         <ul class="ulone">
  20.           <li
  21.             class="lione"
  22.             v-for="(item, index) in leftList"
  23.             :class="{ lis_one_color: index == currentIndex }"
  24.             :key="index"
  25.             @click="leftClick(index)"
  26.           >
  27.             {{ item.name }}
  28.           </li>
  29.         </ul>
  30.       </div>
  31.       <div class="right" ref="right">
  32.         <ul class="rightulone">
  33.           <li class="lis" v-for="(i, ind) in rightList" :key="ind">
  34.             <div
  35.               v-for="(item, index) in i.app_category_items"
  36.               class="rightdiv"
  37.               :key="index"
  38.             >
  39.               <div class="rightdivtwo">
  40.                 <div class="img">
  41.                   <van-image :src="item.cover" />
  42.                 </div>
  43.                 <p>{{ item.name }}</p>
  44.               </div>
  45.             </div>
  46.           </li>
  47.         </ul>
  48.       </div>
  49.     </section>
  50.     <!-- 底部 -->
  51.     <tabbbar></tabbbar>
  52.   </div>
  53. </template>
  54.  
  55. <script>
  56. import BetterScroll from "better-scroll";
  57. import Tabbbar from "../components/tabbbar.vue";
  58. export default {
  59.   name: "VantClassification",
  60.   components: {
  61.     Tabbbar,
  62.   },
  63.   data() {
  64.     return {
  65.       list: [],
  66.       leftList: [],
  67.       rightList: [],
  68.       currentIndex: 0,
  69.       img: [],
  70.       rightBScroll: "",
  71.       leftBScroll: "",
  72.       allHeight: [], //承载右侧每一块高度值
  73.       flag: false,
  74.     };
  75.   },
  76.   created() {},
  77.   updated() {
  78.     if (!this.rightBScroll) {
  79.       this.$nextTick(() => {
  80.         this.leftBScroll = new BetterScroll(this.$refs.left, {
  81.           click: true,
  82.           probeType: 3,
  83.         });
  84.         console.log(this.leftBScroll);
  85.         this.rightBScroll = new BetterScroll(this.$refs.right, {
  86.           probeType: 3, // 是否会截流scroll事件
  87.           click: true, // 是否开启点击事件
  88.           // scrollY: true, // 是否开启Y轴滚动方向
  89.           // useTransition: false, // 防止iphone微信滑动卡顿
  90.           // bounce: true, // 是否启用回弹动画效果
  91.           // momentumLimitDistance: 5, // 符合惯性拖动的最小拖动距离
  92.         });
  93.         // console.log(this.rightBScroll);
  94.         let height = 0;
  95.         this.allHeight.push(height); // 先把0放在数组的开头
  96.         let uls = this.$refs.right.getElementsByClassName("lis");
  97.  
  98.         Array.from(uls).forEach((v) => {
  99.           height += v.clientHeight;
  100.           this.allHeight.push(height); // 把每个li的高度放在新数组中
  101.           // console.log(this.allHeight);
  102.         });
  103.         // 右侧滚动距离
  104.         this.rightBScroll.on("scroll", (pos) => {
  105.           this.scrollY = Math.abs(Math.round(pos.y));
  106.           // console.log(this.scrollY);
  107.           for (let i = 0; i < this.allHeight.length; i++) {
  108.             if (
  109.               this.scrollY > this.allHeight[i] &&
  110.               this.scrollY < this.allHeight[i + 1]
  111.             ) {
  112.               if (!this.flag) {
  113.                 this.currentIndex = i;
  114.                 console.log(this.currentIndex);
  115.               }
  116.             }
  117.           }
  118.         });
  119.         // 结束时距离
  120.         this.rightBScroll.on("scrollEnd", (pos) => {
  121.           //结束时触发事件获取一次位置，因为使用了模式2，惯性滚动不触发事件
  122.           this.scrollY = Math.abs(Math.round(pos.y));
  123.           this.flag = false;
  124.         });
  125.       });
  126.     }
  127.   },
  128.   mounted() {
  129.     let a = this.$refs.sec;
  130.     a.style.height = document.documentElement.clientHeight - 95 + "px";
  131.     this.getData();
  132.   },
  133.   computed: {},
  134.   methods: {
  135.     search() {
  136.       this.$router.push("/search");
  137.     },
  138.     // 请求数据
  139.     getData() {
  140.       this.$axios.get("/category/app_category").then((res) => {
  141.         console.log(res);
  142.         this.list = res.data.data;
  143.         // console.log(this.list);
  144.         let leftArr = [];
  145.         let rightArr = [];
  146.         this.list.forEach((v) => {
  147.           leftArr.push({
  148.             id: v.id,
  149.             name: v.name,
  150.           });
  151.           rightArr.push(v);
  152.           /* console.log(leftArr);
  153.           console.log(rightArr); */
  154.         });
  155.         this.leftList = leftArr;
  156.         // console.log(this.leftList);
  157.         // 右侧部分
  158.         this.rightList = rightArr;
  159.         // console.log(this.rightList);
  160.       });
  161.     },
  162.     leftClick(index) {
  163.       // console.log(index);
  164.       this.flag = true;
  165.       this.currentIndex = index;
  166.       this.rightBScroll.scrollTo(0, -this.allHeight[index], 300);
  167.       // console.log(this.allHeight[index]);
  168.     },
  169.   },
  170. };
  171. </script>
  172.  
  173. <style  scoped>
  174. .header {
  175.   background-color: #fff;
  176.   width: 100%;
  177.   height: 45px;
  178.   display: flex;
  179.   justify-content: space-between;
  180.   align-items: center;
  181. }
  182. .icon-one {
  183.   margin-left: 0.133333rem;
  184.   /* width: 7%; */
  185. }
  186. .sousuo {
  187.   width: 86%;
  188.   height: 45px;
  189. }
  190. .icon-two {
  191.   width: 7%;
  192.   margin-left: 0.133333rem;
  193. }
  194. /* section样式 */
  195. .section {
  196.   margin-bottom: 50px;
  197.   display: flex;
  198.   overflow: hidden;
  199. }
  200. .ulone {
  201.   width: 2.6667rem;
  202.   overflow: hidden;
  203. }
  204. .lione {
  205.   font-weight: bold;
  206.   text-align: center;
  207.   font-size: 18px;
  208.   /* width: 100%; */
  209.   height: 50px;
  210.   line-height: 36px;
  211.   margin: 10px 0;
  212.   padding: 7px 0;
  213.   box-sizing: border-box;
  214. }
  215. .lis_one_color {
  216.   color: rgb(255, 102, 0);
  217.   border-left: 3px rgb(255, 102, 0) solid;
  218. }
  219. .right {
  220.   width: 7.3333rem;
  221.   overflow: hidden;
  222. }
  223. .rightulone {
  224.   width: 100%;
  225. }
  226. .rightdiv {
  227.   width: 33%;
  228.   /* height: 100px; */
  229.   /* background-color: blue; */
  230.   display: inline-block;
  231. }
  232. .img {
  233.   width: 100%;
  234.   height: 80px;
  235. }
  236. .rightdivtwo {
  237.   width: 100%;
  238.   padding: 0 5px;
  239.   box-sizing: border-box;
  240.   text-align: center;
  241. }
  242. </style>

主要绕一点的也就是中间的布局，之前是左右两边使用overflow：auto去写的

这里使用overflow：hidden

基本结构布局如下：

  1. <section class="section" ref="sec">
  2.       <div class="left" ref="left">
  3.         <ul class="ulone">
  4.           <li class="lione">
  5.           </li>
  6.         </ul>
  7.       </div>
  8.       <div class="right" ref="right">
  9.         <ul class="rightulone">
  10.           <li>
  11.             <div class="rightdiv">
  12.               <div class="rightdivtwo">
  13.                <div class="img">
  14.                   <van-image :src="item.cover" />
  15.                </div>
  16.                 <p></p>
  17.               </div>
  18.             </div>
  19.           </li>
  20.         </ul>
  21.       </div>
  22. </section>

css样式： 

  1. /* section样式 */
  2. .section {
  3.   margin-bottom: 50px;
  4.   display: flex;
  5.   overflow: hidden;
  6. }
  7. .ulone {
  8.   width: 2.6667rem;
  9.   overflow: hidden;
  10. }
  11. .lione {
  12.   font-weight: bold;
  13.   text-align: center;
  14.   font-size: 18px;
  15.   /* width: 100%; */
  16.   height: 50px;
  17.   line-height: 36px;
  18.   margin: 10px 0;
  19.   padding: 7px 0;
  20.   box-sizing: border-box;
  21. }
  22. .lis_one_color {
  23.   color: rgb(255, 102, 0);
  24.   border-left: 3px rgb(255, 102, 0) solid;
  25. }
  26. .right {
  27.   width: 7.3333rem;
  28.   overflow: hidden;
  29. }
  30. .rightulone {
  31.   width: 100%;
  32. }
  33. .rightdiv {
  34.   width: 33%;
  35.   /* height: 100px; */
  36.   /* background-color: blue; */
  37.   display: inline-block;
  38. }
  39. .img{
  40.   width: 100%;
  41.   height: 80px;
  42. }
  43. .rightdivtwo {
  44.   width: 100%;
  45.   padding:0 5px;
  46.   box-sizing: border-box;
  47.   text-align: center;
  48. }

使用better-scroll插件让布局可以滚动

  1. if (!this.rightBScroll) { 
  2.  updated () {
  3.     this.$nextTick(() => {
  4.       this.leftBScroll = new BetterScroll(this.$refs.left, {
  5.         click: true,
  6.         probeType: 3,
  7.       });
  8.       console.log(this.leftBScroll);
  9.       this.rightBScroll = new BetterScroll(this.$refs.right, {
  10.         probeType: 3, // 是否会截流scroll事件
  11.         click: true, // 是否开启点击事件
  12.         // scrollY: true, // 是否开启Y轴滚动方向
  13.         // useTransition: false, // 防止iphone微信滑动卡顿
  14.         // bounce: true, // 是否启用回弹动画效果
  15.         // momentumLimitDistance: 5, // 符合惯性拖动的最小拖动距离
  16.       });
  17.       console.log(this.rightBScroll);
  18.  
  19.     });
  20.   },
  21. }

之后获取最外层的循环的六个li

  1.       let height = 0;
  2.       this.allHeight.push(height);// 先把0放在数组的开头
  3.       let uls = this.$refs.right.getElementsByClassName('lis');
  4.       
  5.        Array.from(uls).forEach(v => {
  6.           height += v.clientHeight
  7.           this.allHeight.push(height) // 把每个li的高度放在新数组中
  8.           // console.log(this.allHeight);
  9.         })

核心部分

  1.     if (!this.rightBScroll) {
  2.       this.$nextTick(() => {
  3.         this.leftBScroll = new BetterScroll(this.$refs.left, {
  4.           click: true,
  5.           probeType: 3,
  6.         });
  7.         console.log(this.leftBScroll);
  8.         this.rightBScroll = new BetterScroll(this.$refs.right, {
  9.           probeType: 3, // 是否会截流scroll事件
  10.           click: true, // 是否开启点击事件
  11.         });
  12.         let height = 0;
  13.         this.allHeight.push(height); // 先把0放在数组的开头
  14.         let uls = this.$refs.right.getElementsByClassName("lis");
  15.         Array.from(uls).forEach((v) => {
  16.           height += v.clientHeight;
  17.           this.allHeight.push(height); // 把每个li的高度放在新数组中
  18.         });
  19.         // 右侧滚动距离
  20.         this.rightBScroll.on("scroll", (pos) => {
  21.           this.scrollY = Math.abs(Math.round(pos.y));
  22.           // console.log(this.scrollY);
  23.           for (let i = 0; i < this.allHeight.length; i++) {
  24.             if (
  25.               this.scrollY > this.allHeight[i] &&
  26.               this.scrollY < this.allHeight[i + 1]
  27.             ) {
  28.               if (!this.flag) {
  29.                 this.currentIndex = i;
  30.                 console.log(this.currentIndex);
  31.               }
  32.             }
  33.           }
  34.         });
  35.         // 结束滚动时距离
  36.         this.rightBScroll.on("scrollEnd", (pos) => {
  37.           this.scrollY = Math.abs(Math.round(pos.y));
  38.           this.flag = false;
  39.         });
  40.       });
  41.     }

 

 为什么要加一个flag的状态？如果不加状态，会出现一个小bug。左边的点击事件会随着右边的滚动事件一起进行。也就是当我点击按钮让右边滚动时，左边的列表项会从上往下依次滚动到指定位置，加了这个状态后就完美的解决了冲突问题

修改前：

 修改后：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/325808
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。