uni-app中的分类页面(仿京东分类页面)(scroll-view的使用)
京东效果图：
代码效果图：
说明：
实现图中所示的的左侧标签栏可上下滑动，右侧区域为对应左侧标签展开的图片文字详情说明，也具备上下滑动的功能
scroll-view
可滚动试图区域
本文着重使用”scroll-y“即纵向滑动
<template>
<view class="classify">
<!-- 左侧标签区域 -->
<scroll-view class="left" scroll-y>
<!-- 定义一个acitves为0，与index的索引绑定,若相等赋予类名，不相等为空 -->
<view :class="actives === index ? 'active' : ''"
v-for="(item, index) in cates"
:key="item.id"
@click="leftClickHandle(index, item.id)"
>
{{ item.title }}
</view>
</scroll-view>
<!-- 右侧图片区域 -->
<scroll-view class="right" scroll-y>
<view class="item" v-for="item in secondData" :key="item.id">
<image @click="previewImg(item.img_url)" :src="item.img_url"></image>
<text>{{item.title}}</text>
</view>
<text class="none" v-if="secondData.length === 0">暂无数据,请浏览其他页面!</text>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
// 左侧页面数据
cates: [],
// 设置高亮标签
actives: 0,
// 右侧图片数据
secondData: []
}
},
onLoad () {
this.getPicsCate()
},
methods: {
// 发送请求获取左侧页面数据
async getPicsCate () {
const res = await this.$myRequest({
url: '/api/getimgcategory'
})
this.cates = res.data.message
this.leftClickHandle(0, this.cates[0].id)
},
// 点击时获取标签索引用于高亮显示及id用于获取右侧图片数据
async leftClickHandle (index, id) {
this.actives = index
// 获取右侧的数据
const res = await this.$myRequest({
url: '/api/getimages/' + id
})
this.secondData = res.data.message
},
// 预览图片
previewImg (current) {
// 用map方法将全部的图片url放入定义的数组中
const urls = this.secondData.map(item=>{
return item.img_url
})
// current为将点击的设为第一张预览图
uni.previewImage({
current,
urls,
indicator: 'default'
})
}
}
}
</script>
<style lang="scss">
page {
height: 100%;
}
.classify {
height: 100%;
display: flex;
.left {
width: 200rpx;
height: 100%;
border-right: 1px solid #eee;
view {
height: 60px;
line-height: 60px;
color: #333;
text-align: center;
font-size: 30rpx;
border-top: 1px solid #eee;
}
.active {
background: $shop-color;
color: #fff;
}
}
.right{
height: 100%;
width: 520rpx;
margin: 10rpx auto;
.item{
margin-top: 30rpx;
border-bottom: 1px solid #C0C0C0;
image{
width: 520rpx;
height: 520rpx;
border-radius: 5px;
}
text{
font-size: 30rpx;
line-height: 35rpx;
}
}
.none {
color: $shop-color;
}
}
}
</style>
案例二：双联动
<view class="ld">
// 左侧区域
<view class="left">
<view
v-for="(item,index) in list"
:key="index"
// 设定点击事件，触发后给选中的标签动态绑定样式
@click="setId(index)"
:class="{active:index===currentNum}"
>
{{item.title}}
</view>
</view>
// 右侧区域
<view class="right">
<scroll-view
:scroll-y="true"
style="white-space: nowrap;height:200px;"
// uni的方法，值为某子元素id即拿到左侧传的index
:scroll-into-view="clickId"
// uni方法，过渡动画
scroll-with-animation
// uni方法，滚动时触发，触底
@scroll="scroll"
@scrolltolower="scrolltolower"
>
<view v-for="(item,index) in list" :key="index">
<view class="title" :id="'po'+index">{{item.title}}</view>
<view v-for="(it,idx) in item.list" :key="idx">
{{it}}
</view>
</view>
</scroll-view>
</view>
</view>
// mock 数据
data() {
return {
list:[
{title:"中餐",list:["盖饭","扒饭","咖喱饭","鸡排饭"]},
{title:"西餐",list:["牛排","意面","芝士","汉堡"]},
{title:"法餐",list:["辣子鸡丁","xxx","肥仔快乐水","填缝隙"]},
{title:"快餐",list:["薯条","丸子","粥","饮料"]},
],
clickId:"",
currentNum:0,
}
},
// 点击后触发的方法
setId(index){
this.clickId="po"+index;
this.currentNum=index;
}，
scroll(e){
let scrollTop=e.target.scrollTop;
for(let i=0;i<this.topList.length;i++){
let h1=this.topList[i];
let h2=this.topList[i+1];
if(scrollTop>=h1&&scrollTop<h2){
this.currentNum=i;
}
}
},
scrolltolower(){
setTimeout(()=>{
this.currentNum=3;
}, 80);
},
getNodesInfo(){
const query = uni.createSelectorQuery().in(this);
query.selectAll('.title').boundingClientRect().exec((res)=>{
let nodes=res[0];
let rel=[];
nodes.map(item=>{
rel.push(item.top)
})
this.topList=rel;
});
}
.box1{
width:100px;
height:100px;
background: red;
}
.box2{
width:200upx;
height:200upx;
background: yellow;
}
.ld{
display: flex;
.left{
width:100px;
border:1px solid red;
}
.right{
flex: 1;
border:1px solid red;
.title{
font-size: 20px;
font-weight: bold;
background:pink;
}
}
}
// 高亮样式
.active{
background:red;
}