介绍 vue的优点 <李> 左边滚动列表dom
,& lt; div 类=癿enu-wrapper", v-el: menu-wrapper>
,,& lt; ul>
,,,& lt; li v=癷tem goods"拷贝,类=癿enu-item"
,,,,,:类=皗& # 39;目前# 39;:currentIndex ===,美元指数}“;
,,,,,@click=皊electMenu(指数、美元事件),在
,,,,& lt; span 类=皌ext border-1px"比;
,,,,,& lt; span v-show=癷tem.type 祝辞,0“,类=癷con"
,,,,,,:类=癱lassMap [item.type]“祝辞& lt;/span> {{item.name}}
,,,,& lt;/span>
,,,& lt;/li>
,,& lt;/ul>
& lt;才能/div>
右边滚动列表dom
& lt; div 类=癴ood-wrapper", v-el: food-wrapper>
,,& lt; ul>
,,,& lt; li v=癷tem goods"拷贝,类=癴ood-list food-list-hook"比;
,,,,& lt; h2 类=皌itle"在{{item.name}} & lt;/h2>
,,,,& lt; ul>
,,,,,& lt; li v=癴ood item.foods"拷贝,类=癴ood-item border-1px"比;
,,,,,,& lt; div 类=癷con"比;
,,,,,,,& lt; img 宽度=?7”,身高=?7”,https://www.yisu.com/zixun/: src=" food.icon ">
本篇文章给大家分享的是有关怎么在vue中使用better-scroll实现一个列表左右联动效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
<强>一。实现思路
(1)实现上是左右分别一个better-scroll列表
<李>(2)利用计算右侧列表每一个大区块的高度来计算左侧的位置
<强>二。实现
<强> 1。实现左右两个better-scroll
(1) dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)
{{food.description}}
月售{{food.sellCount}}份
好评率{{food.rating}} %
{food.price}}
{food.oldPrice}}
