vue表单联动,vue列表横向三级联动
这篇文章主要为大家详细介绍了某视频剪辑软件实现列表左右联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现列表左右联动效果的具体代码，供大家参考，具体内容如下
先谈需求：左侧为分类列表，点击分类名右侧商品列表会滑动对应分类到顶部；右侧商品列表滑动到某一分类时左侧分类列表对应分类会滑动到顶部高亮显示。
再来说说思路：
1、引用捣蛋鬼插件，这种方法冲突和不适配可能性太多，会越改越麻烦所以弃用。
2、使用页面滑动卷起事件，引入更好的滚动组件。这个较为轻便，可自定义性较大，可以使用。
实现步骤：
1、左右两侧均使用迭代循环列表，使用指数来索引目录106 .射流研究…中使用数组下标来和列表指数对应，实现左右互通功能。
2、左右列表都在循环列表的父层增加裁判员绑定，获取对应的列表滚动，以及对应元素高度，从而根据高度来判断需要滑动的距离。
效果图：
页面基础代码：
模板
div class=wrap
！-顶部搜索-
div class=topMenu
img class= back _ l @ click=回去 src=。/img/backicon@2x.png
div class=section
img class=saleR src= ./img/sub.png
输入占位符=搜索商家和商品自动对焦@ keyup。enter=提交顶部/
/div
img class= saleR @ click= goMap src= ./img/citydw.png
/div
div class= no _ s roll v-if= nav list
aside class=tabNav ref=l_list
保险商实验所
Li ref= l _ item class= nav _ Li :class=(TabNavList==index)？签入“:”，index= index :id= index @ click= checkNavList(item，index) v-for=(item，index) in navList :key=index
img class=imgLi src= ./img/Shu @ 2x。png v-if= TabNavList==index /{ { item。GC名称} }
/李
/ul
/抛开
！-增加浮动层-
div class= the fixed :class=(TabNavList==index)？是固定的:是隐藏的 v-if= scroll true
div class= left name"{ scroll true。GC name } }/div
div class=右BTN @ click= gotwo class(scroll true)全部分类img class=r_img_btn src= ./img/jiantou.png/div
/div
section class= new height ref= r _ list
差异
div class=proList v-for=(item，index)in navList :key= index ref= good
div class=r_top
div class= left name"{ item。GC name } }/div
div class=右BTN @ click= gotwo class(item)全部分类img class=r_img_btn src= ./img/jiantou.png/div
/div
div class=r_cont
div class= Cu-items v-for=(item，index)in(item。子列表):key= index @ click= goThreeCalss(item)
div class=storeL
img v-if= item。 class img :src= item。类别img alt= /
img v-else src=././carManage/img/zwt.png/
/div
div class= text"{ item。GC name } }/div
/div
/div
/div
/div
/部分
/div
/div
/模板
脚本
//从" @/common/js/paths "导入{baseUrl}
从"更好的滚动"导入更好的
导出默认值{
名称： allStoreClass ，
组件：{
较好的
},
data () {
返回{
loadStatus: true，
车身高度：车窗。内部高度像素，
商店名称： ,
距离： ,
位置区域： ,
位置点：{
液化天然气："",
纬度：""
},
中心：{
液化天然气："",
纬度：""
},
变焦：15,
指数：0,
gcName:" "，
gcParentId:" "，
searchBarFixed: false，
scrollY: 0，//定义的Y滚动轴及初始值
TabNavList: 0，//左右联动取值
scrollTrue: ，//右侧吸顶
导航列表：[],//全局列表
isScroll:错误，
pageIndex: 1，
页面大小：20,
标记点：{
液化天然气":",
纬度:
},
arr: [0]，
标志：真的，
空，
秀：假的，
IOs:/iphone OS/g . test(窗口。领航员。用户代理。tolowercase())
}
},
计算值：{
//001
},
已创建(){
//这个store.commit(setTopDisplay ，false)
//这个. store.commit(setPageTitle ，分类列表)
如果（这个100美元商店。状态。platform=== app ){
//eslint-disable-next-line no-undef
设location=JSON。解析(原生。获取位置())
这个。位置点。液化天然气=位置。经度
这个。位置点。纬度=位置。纬度
这个。位置区域=位置。城市
this.getList()
} else if(这个. store.state.from===bjsh) { //更改北京石化来源
this.getList()
}否则{
this.getPositionJs()
this.getList()
}
},
已安装(){
这个. nextTick(()={
这个. initScroll()
这个. getHeight()
})
如果（这个100美元商店。状态。platform=== app ){
//eslint-disable-next-line no-undef
本地人。ifshowtitlebarview(false)
} else if(这个100美元商店。状态。platform=== web ){
这个store.commit(setTopDisplay ，false)
}
},
方法：{
goBack () {
如果（这个100美元商店。状态。platform=== app ){
//eslint-disable-next-line no-undef
native.goBack()
} else if(这个. store.state.from===hnsh) { //更改与北京石化交互
//河南石化交互
让params={
类型：折返，
指数：-1
}
这个$桥。呼叫处理程序(电话桥，参数，(数据)={
})
}否则{
history.go(-1)
}
},
_initScroll () {
this.left=new Better(this .$refs.l_list，{
点击：真的，
探针类型：3
})
this.rgt=新的更好(这个.$refs.r_list，{
探针类型：3,
点击：正确
})
this.rgt.on(scroll ，(res)={
if (this.flag) {
这个。scrolly=数学。ABS(决议y)16//页面内有一个16像素的顶部状态栏
对于(设I=0；我这个。由…改编长度；i ) {
如果(这个。滚动这个。arr[I]这个滚动这个。arr[I 1]){
这个TabNavList=i - 1 //左右联动取值
//控制台。日志(这个。导航列表[本].TabNavList].gcName) //取出元素的gcName
这个。滚动true=this。导航列表[本].TabNavList]
this.isScroll=true
//document.getElementById(this .TabNavList).scrollIntoView()
this.left.scrollToElement(this .$refs.l_list，100，0，这个TabNavList * 60)
}
}
}
})
this.left.on(scroll ，(res)={
if (this.flag) {
this.scrollY=Math.abs(res.y) 16
this.left.scrollToElement(this .$参考文献。l _ list[这个。100,0,0)
}
})
},
_getHeight () {
////开始改造
让rightItems=this .$参考文献。r _ list。getelementsbyclassname( proList )
setTimeout(()={ //根据betterScroll定义滚动
console.log(rightItems) //右侧列表数组内容
控制台。日志(正确的项目。长度)//右侧列表数组长度
如果(右项(右项。长度0)){
让高度=0
this.arr.push(高度)
对于(设I=0；一、权利事项长度；i ) {
let item=rightItems[i]
height=item.clientHeight
this.arr.push(高度)
}
}
}, 600)
},
获取列表(e) {
这个。axios。get(` v4/商品管理器/商品分类，{
参数：{
关键词：e ，//关键词
pageNo: this.pageIndex，
页面大小：this.pageSize
}
}).然后((res)={
if (res.data.isSuccess) {
//控制台。记录(研究数据。结果数据)
这个。导航列表=资源数据。结果数据
//这个。scroll true=研究数据。结果数据[0]
}否则{
这个. toast(res.data.message)
}
}).接住(错误={
console.log(错误)
这个$吐司(’请求失败，请稍后重试)
})
},
getPositionJs () {
让这个=这个
//eslint-disable-next-line no-undef
定义变量地理位置=新BMap .地理定位()
地理定位。getcurrentposition(function(r){
//eslint-disable-next-line no-undef
如果(这个。获取状态()===BMAP _状态_成功){
console.log(是否成功定位)
_这个。位置点。LNG=r点。液化天然气
_这个。位置点。纬度=r点。拉脱维亚的货币单位
_这个。位置区域=r地址。城市
}否则{
定义变量信息=未能获取当前地理定位，请检查手机是否已打开位置服务! \n 失败： this.getStatus()
警报（信息)
}
}，{ enablehigaccuracy:true })
},
getDetails (it) {
this.show=！这个。显示
这个
},
//顶部搜索
提交顶部(e) {
console.log(e.target.value)
设obj=e .目标值
this.getList(obj)
},
//顶部跳地图
goMap () {
这个. router.push({name: nearStore ，query: {from: storeIndex ，sortFlag: this.curSort，gcName: this.gcName，gcParentId: this.gcParentId，lat1: this.positionPoint.lat，lon1: this.positionPoint.lng}})
},
//左侧选择拉环
checkNavList (e，v) {
console.log(e，v)
this.gcName=e.gcName
this.gcParentId=e.gcParentId
this.flag=false
这个TabNavList=v //左右联动取值
this.rgt.scrollToElement(this .$refs.good[v]，100，0，0)
setTimeout(()={
this.flag=true
}, 100)
//document.getElementById(v).scrollIntoView()
//this.searchBarFixed=true
},
//一级分类查看全部
goTwoClass (e) {
console.log(e)
这个1000美元路由器。push({ name: class prolist ，查询：{gcName: e.gcName，gcParentId: e.gcId，gcId: }})
},
//去二级分类详情
哥特里卡尔斯（东){
console.log(e)
这个1000美元路由器。push({ name: class prolist ，查询：{gcName: e.gcName，gcParentId: ，gcId: e.gcId}})
},
地图点击(item){//item。storename，item.distance，item.storeWd，item.storeJd
let lng=item.storeJd
let lat=item.storeWd
let name=item.storeName
如果（这个100美元商店。状态。platform=== app ){
if (typeof (native)！==未定义){
//eslint-disable-next-line no-undef
native.daoHangWithLat(lat，lng，name)
}
} else if(这个. store.state.from===hnsh) {
让params={
稍后开始：这个。位置点。稍后，
开始长：这个。位置点。液化天然气，
纬度：纬度
液化天然气，
类型："导航"
}
这个$桥。呼叫处理程序(电话桥，参数，(数据)={
})
}否则{
位置。https://api.map.baidu.com/marker？位置=纬度,液化天然气标题=目的位置content= name output=htmlhidjnavigation=1jh webview=1
}
},
mapModalClick(液化天然气，纬度，名称，距离，地址){
this.mapModal=true
这个. router.push({name: bdMap ，查询：{lng: lng，lat: lat，name: name，distance: distance，address: address}})
/* this.center.lng=lng
this.center.lat=纬度
this.markerPoint.lng=lng
this.markerPoint.lat=lat
this.storeName=name */
/* var opts={
宽度：380,
身高：180,
不透明度：0.5,
//eslint-disable-next-line no-undef
偏移量：新的BMap .尺寸(0,-30),
title: p style= font-size:20px；颜色：# 2ca90e边距：0;边距-底部：20px 这里是内容/p ，
enableMessage: false
}
//eslint-disable-next-line no-undef
var地图=新的BMap .地图(“canvasMap”)
//eslint-disable-next-line no-undef
var infoWindow=新的BMap .信息窗口(“”，选项)
//eslint-disable-next-line no-undef
map.openInfoWindow(infoWindow，new BMap .点( 0 , 0 )*/
//eslint-disable-next-line no-undef
map.centerAndZoom(新的BMap .点（液化天然气，纬度),18)
},
syncCenterAndZoom (e) {
const {lng，lat}=e.target.getCenter()
this.center.lng=lng
this.center.lat=纬度
this.zoom=e.target.getZoom()
},
draw ({el，BMap，map}) {
常量像素=地图。pointtoooverlaypixel(新BMap .点(116.404,39.915))
el.style.left=pixel.x - 60 px
el.style.top=pixel.y - 20 px
},
销毁(){
窗户。removeeventlistener( scroll ，this.handleScroll，true)
}
}
}
/脚本
样式范围。wrap { margin:0 auto；宽度：100%;身高：100%;溢出：隐藏；}。顶部菜单{
宽度：100%;
位置：绝对；
边距：0自动；
填充：7.5像素15像素
背景：# fff
z指数：19;
显示器：flex
justify-content:space-between；
}。部分{
宽度：80%;
高度：30px
背景：rgba(242，242，242，1)；
边框半径：15px
显示器：flex
左边距：15px
右边距：15px
}。部分输入{
字体大小：12px
字体粗细：400;
颜色：rgba(153，153，153，1)；
行高：20px
边框：无；
背景：rgba(242，242，242，1)；
大纲：无；
}。back_l{
宽度：30px
高度：30px
}。saleR{
宽度：30px
高度：30px
}。no _ s roll { margin:0自动；宽度：100%;身高：100%;填充顶部：45像素溢出：隐藏；位置：相对；显示器：flex}。main { display:-WebKit-flex；显示器：flex flex-流量：列nowrapjustify-内容：居中；对齐-项目：居中；身高：100%;文本对齐：居中；边距-底部：20px}。top _ top { margin-top:-50px；位置：相对；z指数：999;}。margin top { margin-top:45px；}。回去{位置：绝对；左：0;top:0；宽度：9雷姆左填充：3雷姆文本对齐：左对齐；}。新高度{ display:block；溢出：隐藏；背景：# fff位置：相对；宽度：75%;填充：0 10px溢出-y:滚动；溢出-x:隐藏；-网络工具包-溢出-滚动：触摸；}。新高度铜-项目{位置：相对；显示器：flex浮动：左；伸缩方向：列；对齐-项目：居中；宽度：30%;身高：110像素左边距：4.5%;边距-底部：10px}。新高度100 .铜-项目：第n个类型(3n-2) {左边距：0;}。铜项目storeL { width:80px；高度：80px位置：相对；边框-半径：4px}。铜项目storeL img { width:80px；高度：80px}。铜项目text { font-size:14px；行高：18px边距-顶部：5px颜色：# 666;}。新高度proList {宽度：100%;显示器：flex伸缩方向：列；位置：相对；}。新高度proList .r _ top { height:60px；显示器：flex justify-content:space-between；对齐-项目：居中；}。新高度proList .r_top .左名{ line-height:60px；字体大小：16px文本对齐：左对齐；颜色：# 666;左边距：10px}。新高度proList .r_top .右BTN { font-size:12px；行高：60px颜色：# 2c BF 64}。新高度proList .r_top .对Btn .r _ img _ BTN { width:11px；身高：11px左边距：5px变换：旋转(270度);}。固定{高度：60px显示器：flex justify-content:space-between；对齐-项目：居中；}。修好了右BTN { font-size:12px；行高：60px颜色：# 2c BF 64}。修好了rightBtn .r _ img _ BTN { width:11px；身高：11px左边距：5px变换：旋转(270度);}。修好了.左名{ line-height:60px；字体大小：16px文本对齐：左对齐；颜色：# 666;左边距：10px}。tab nav { display:block；宽度：25%;背景：# f5f 5 F2；溢出：隐藏；位置：相对；溢出-y:滚动；溢出-x:隐藏；-网络工具包-溢出-滚动：触摸；}。选项卡导航：-WebKit-滚动条{显示：无；}。tab nav:滚动条{ display:nonel }。tabNav .nav _ list { display:flex；宽度：100%;}。tabNav .nav _ Li { font-size:16px；行高：20px颜色：# 666;文本对齐：居中；高度：60px宽度：100%;伸缩：0;位置：相对；显示器：flexjustify-content:居中；对齐-项目：居中；}。tabNav .导航李. im gli {身高：16px位置：绝对；左：0;top:22px；}。checkIn { color:#2CBF64！重要；背景：#fff！重要；字体粗细：粗体；}。已修复{
高度：60px
行高：60px
字体大小：16px
文本对齐：左对齐；
颜色：# 666;
位置：固定；
宽度：70%;
左：27%;
背景：# fff
z指数：19;
}。isHide {
位置：固定；
高度：60px
行高：60px
字体大小：16px
文本对齐：左对齐；
颜色：# 666;
宽度：70%;
左：27%;
背景：# fff
z指数：19;
}
/风格
风格。BMap _ cpyCtrl { display:none；}。anchorBL {显示：无；}。BMap _无打印。锚bl { display:block；底部：259px！重要；}。BMap _ stdMpCtrl { display:block；底部：269px！重要；}。BMap _ pop { position:absolute；}
/风格
备注：代码做了二期优化
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。