您现在的位置是:首页 > Javascript
当前栏目
vue利用better-scroll插件实现分类页左右联动效果并实现点击左侧,滚动右侧
2023-04-18 15:03:34 时间
先看下静态效果图
image.png
实现的效果是滑动右侧,左侧跟随实际高度滚动
实现点击左侧,右侧滚动到指定位置
废话不多说,直接上代码,分步骤:
先上DOM,这里用到了vant的tabs和sidebar
<!-- 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>
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条
相关文章
- HarmonyOS官方模板学习 之 About Feature Ability(Java)
- Mozilla 开始向所有版本的 Firefox 推送站点隔离功能
- 曝Win10新版让人兴奋:诸多惊喜新功能来了
- HarmonyOS三方件开发指南(19)-BGABadgeView徽章组件
- 为什么Cloudera要创建Hadoop安全组件Sentry?
- Cloudera公司首席架构师谈Hadoop之变迁
- Cloudera将Spark划入Hadoop
- YARN动摇了MapReduce对Hadoop的掌控
- Hadoop 2:大数据演进中的一次大飞跃
- N卡驱动实在太头疼!这款神器帮你彻底解决
- OpenHarmony 1.1.0 LTS 正式发布
- HarmonyOS APP组件分享(六)
- HarmonyOS APP组件分享(五)
- 界面UI即将大改!Windows1021H2最新预览版抢先看
- 微软正在将Windows 10任务栏从Explorer.exe进程中移出
- HarmonyOS APP组件分享(四)
- 流畅度大提升!微软对Windows 10任务栏调整:UI也要变样
- IETF 正式弃用 TLS 1.0 和 TLS 1.1
- Firefox 将采取新的 referrer 策略
- HarmonyOSAPP组件分享(三)