<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../../css/aui.min.css"/>
<title>侧边选项卡-左右联动</title>
<style>
.content-left-scroll{width: 120px; height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); background: #F4F4F4; overflow: hidden; overflow-y: scroll; display: inline-block; position: absolute; top: 50px; left: 0;}
.content-left-warp{width: 100%; height: auto;}
.content-left-scroll li{width: 100%; height: 55px; line-height: 55px; text-align: center; font-size: 15px; color: #333;}
.content-left-scroll li.active{width: 121px; color: var(--aui-color); background: #FFF; position: relative; z-index: 2;}
.content-left-scroll li.active:before{content: ''; width: 2px; height: 55px; background: var(--aui-bg); border-radius: 3px; position: absolute; top: 0; left: 0;}
.content-right-scroll{width: -webkit-calc(100vw - 120px); width: calc(100vw - 120px); height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); background: #FFF; overflow: hidden; overflow-y: scroll; position: absolute; top: 50px; left: 120px;}
.content-right-warp{width: 100%; height: auto; padding: 15px 10px; box-sizing: border-box; font-size: 0;}
.content-right-scroll .banner{width: 100%; margin-bottom: 10px;}
.content-right-scroll .banner img{width: 100%;}
.content-right-scroll li{width: 33.33%; margin-bottom: 10px; padding: 0 0px; box-sizing: border-box; text-align: center; display: inline-block; vertical-align: top;}
.content-right-scroll li img{width: 40px; margin-bottom: 5px;}
.content-right-scroll li p{width: 100%; line-height: 20px; font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>
</head>
<body>
<div class="container" id="app">
<header class="aui-header">
<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
<div class="aui-header-title">侧边选项卡-左右联动</div>
</header>
<div class="aui-content" v-cloak >
<div class="content-left-scroll col-after">
<div class="content-left-warp">
<ul>
<li class="row-after" v-for="(item, index) in items.leftData" :class="{'active' : currentLeftIndex==index}" :index="index" @click.stop="chooseLeftLi($event)">{{item.name}}</li>
</ul>
</div>
</div>
<div class="content-right-scroll">
<div class="content-right-warp">
<ul v-for="(item, index) in items.rightData">
<div class="banner"><img src="../../img/image/banner.png" alt=""></div>
<li v-for="list in item">
<div class="img"><img :src="list.img" alt=""></div>
<p class="name">{{list.name}}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="../../lib/vue.min.js"></script>
<script type="text/javascript" src="../../lib/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../js/aui.min.js"></script>
<script type="text/javascript">
window.onload = function(){
apiready();
}
apiready = function() {
var vm = new Vue({
el: "#app",
data: {
currentLeftIndex: 0,
items: {
leftData: [],
rightData: []
},
},
created: function(){
var _this = this;
},
mounted: function() {
var _this = this;
_this.getData();
_this.scrollRight();
},
updated: function () {
var _this = this;
_this.$nextTick(function () {
})
},
methods: {
getData(){
var _this = this;
for(var i = 0; i < 10; i++){
_this.items.leftData.push({
name: '一级菜单'+(i+1),
id: i,
});
var arr = [];
for(var j = 0; j < 15; j++){
arr.push({
name: '二级菜单'+(i+1)+'-'+(j+1), id: i,
img: 'http://pic2.sc.chinaz.com/files/pic/pic9/201910/bpic14122.jpg',
});
}
_this.items.rightData.push(arr);
}
},
//左侧选择
chooseLeftLi(e){
var _this = this,
el = e.currentTarget,
index = Number($(el).attr("index"));
_this.currentLeftIndex = index;
$(".content-left-scroll").animate({
scrollTop: e.currentTarget.offsetTop - ($(window).height() - $(el).height() - 54) / 2
},200);
$(".content-right-scroll").animate({
scrollTop: document.querySelector(".content-right-warp ul:nth-child("+ (index + 1) +")").offsetTop - 10
},0);
},
scrollRight(){
var _this = this;
$(".content-right-scroll").on("touchmove touchend", function(){
var self = this;
for(var i = 0; i < $(".content-right-warp ul").length; i++){
!(function(index){
if(index > 0){
var T = $(self).scrollTop();
var RT = document.querySelector(".content-right-warp ul:nth-child("+ (index) +")").offsetTop;
var RT_PRE = document.querySelector(".content-right-warp ul:nth-child("+ (index + 1) +")").offsetTop;
var LT = document.querySelector(".content-left-scroll li:nth-child("+ (index) +")").offsetTop;
var LH = document.querySelector(".content-left-scroll li:nth-child("+ (index) +")").offsetHeight;
if(T >= RT){
_this.currentLeftIndex = index - 1;
$(".content-left-scroll").animate({
scrollTop: LT - ($(window).height() - LH - 54) / 2
},0);
if(T >= RT_PRE){
_this.currentLeftIndex = index;
}
}
}
})(i);
}
});
},
}
});
}
</script>
</body>
</html>
2817
07-31
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
