前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue利用better-scroll插件实现分类页左右联动效果并实现点击左侧,滚动右侧

vue利用better-scroll插件实现分类页左右联动效果并实现点击左侧,滚动右侧

作者头像
前端小tips
发布2021-12-10 10:50:30
2.4K0
发布2021-12-10 10:50:30
举报
文章被收录于专栏:前端文章小tips

先看下静态效果图

image.png

实现的效果是滑动右侧,左侧跟随实际高度滚动
实现点击左侧,右侧滚动到指定位置

废话不多说,直接上代码,分步骤:

先上DOM,这里用到了vant的tabs和sidebar

代码语言:javascript
复制
 <!-- tab -->
    <van-tabs v-model="active" sticky color='#2395ff' line-width='25'>
      <van-tab title="点餐">
        <div class="contents" :style="obj">
          <!-- 分类列表 -->
          <div class="menu-wrapper" ref="menuScroll">
            <van-sidebar v-model="activeKey">
              <van-sidebar-item :title="item.name" v-for="(item,index) in goods" :key="index" @click="selectMenu(index)" />
            </van-sidebar>
          </div>
          <!-- 商品列表 -->
          <div class="foods-wrapper" ref="foodScroll">
            <ul>
              <!-- 具体分类 -->
              <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
                <h3 class="title">{{item.name}}</h3>
​
                <!-- 具体的商品列表 -->
                <ul>
                  <li v-for="(food,index) in item.spus" :key="index" @click="showDetail(food)" class="food-item">
                    <div class="icon" :style="head_bg(food.picture)"></div>
                    <div class="content">
                      <h3 class="name">{{food.name}}</h3>
                      <p class="desc" v-if="food.description">{{food.description}}</p>
                      <div class="extra">
                        <span class="saled">{{food.month_saled_content}}</span>
                        <span class="praise">{{food.praise_content}}</span>
                      </div>
                      <p class="price">
                        <span class="text">¥{{food.min_price}}</span>
                        <span>
                          <van-icon name="add" @click.stop="hanldeAdd(food)" color="#2396ff" size="24" />
                        </span>
                      </p>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="评价">评价 2</van-tab>
      <van-tab title="商家">商家 3</van-tab>
    </van-tabs>
代码语言:javascript
复制
data() {
    return {
      activeKey: 0,
      active: 0,
      obj: {
        height: ''
      },
      goods: [
        {
          "name": "热销",
          "icon": "http://p1.meituan.net/xianfu/10ba72e043ef4eca806cafb1a90a22662048.png",
          "spus": [
            {
              "id": 216599656,
              "name": "脆香油条",
              "min_price": 5.5,
              "praise_num": 3,
              "praise_content": "赞3",
              "tread_num": 0,
              "praise_num_new": 3,
              "unit": "例",
              "description": "",
              "picture": "https://cube.elemecdn.com/0/f5/df7d06f23c7651c011534d219a561jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_210,h_210/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp  ",
              "month_saled": 154,
              "month_saled_content": "月售154",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 96985579,
              "name": "麦辣鸡翅2块",
              "min_price": 11,
              "praise_num": 22,
              "praise_content": "赞22",
              "tread_num": 0,
              "praise_num_new": 22,
              "unit": "例",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/38bbfa3f955cbce3330f1cb6818d0ce6216794.png",
              "month_saled": 948,
              "month_saled_content": "月售948",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
              "rating": {
                "comment_count": 4,
                "title": "外卖评价",
                "snd_title": "4条

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现的效果是滑动右侧,左侧跟随实际高度滚动
  • 实现点击左侧,右侧滚动到指定位置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档