vue2.0 better-scroll左右联动

最新推荐文章于 2024-09-03 15:59:41 发布

微光时空

最新推荐文章于 2024-09-03 15:59:41 发布

阅读量616

点赞数

分类专栏： vue案例

本文链接：https://blog.csdn.net/M106588L/article/details/99342352

版权

本文介绍了如何在Vue2.0项目中利用better-scroll插件实现左右联动效果，常见于移动端商城页面。内容涵盖注意事项，如左右分类的联动逻辑，以及在Vue中引入和初始化better-scroll的步骤。同时详细讲解了数据监听、计算属性和事件绑定等关键点，以完成左右滚动和点击事件的响应。

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

在做移动端商城或者其他页面的时候，经常会遇到左右联动的效果，今天我们就使用vue2.0和better-scroll这个插件一起实现左右联动效果。

`首先最简单写法点击左边切换右边内容`

就是给右边的两个盒子加上一个div,然后ref="right_scroll" 获取this.$refs.right_scroll
点击左边切换(简单写法)
   leftFn(ind){
   
      this.scrollIndex=ind;
     this.rightScroll.scrollToElement(this.$refs.right_scroll[ind],1000)
   },

注意事项

左边一级分类和右边二级分类形成联动
当滑动右侧分类列表时, 更新左侧分类选中
点击左侧一级分类项时, 右侧列表滑动到对应位置
在vue脚手架的时候，引入第三方插件better-scroll，如果想了解的话，可以去看看它的中午文档说明，
npm install better-scroll --save直接安装到自己项目当中，并引入

`页面结构`

<div class="search">
    <!-- 搜索导航 -->
    <SearchNav></SearchNav>
    <div class="shop">
      <!-- 左边 -->
      <div class="menu-wrapper">
        <ul>
          <!-- current -->
          <li
            class="menu-item"
            v-for="(goods,index) in searchgoods"
            :key="index"
            :class="{current: index === currentIndex}"
            @click="clickList(index)"
            ref="menuList"
            >
            <span>{
   {
   goods.name}}</span>
          </li>
        </ul>
      </div>
      <!-- 右边 -->
      <div class="shop-wrapper">
        <ul ref="itemList">
          <li class="shops-li" v-for="(goods, index1) in searchgoods" :key="index1">
            <div class="shops-title">
              <h4>{
   {
   goods.name}}</h4>
              <a href="">查看更多 > </a>
            </div>
            <ul class="phone-type" v-if="goods.tag === 'phone'">
              <li v-for="(phone,index) in goods.category" :key="index">
                <img :src="phone.icon" alt="">
              </li>
            </ul>
            <ul class="shops-items">
              <li v-for="(item, index2) in goods.items" :key="index2">
                <img :src="item.icon" alt="">
                <span>{
   {
   item.title}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>

想对应的css 样式

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  .search
    width 100%
    height 100%

最低0.47元/天解锁文章