赞
踩
<template> <view> <view class="search"> <view class="searchBox"> <navigator url="#"> <image src="../../static/search.png" mode=""></image> 搜索全部 </navigator> </view> </view> <view class="cart"> <view class="cartLeft"> <scroll-view class="cartNameLeft" scroll-y="true" :scroll-top="scrollTop"> <view class="cartNameItem" :class="{cateActive:index == current}" v-for="(item,index) in cate" :key='index' @click="menuTab(index)"> {{item.catename}} <view class="cateLine"></view> </view> </scroll-view> </view> <view class="cartRight"> <scroll-view class="cartRightScroll" scroll-y="true" :scroll-into-view = "'cate'+mainCurrent" scroll-with-animation="true" @scroll="rightScorll"> <view class="cateTtem" v-for="(item,index) in cate" :key="index" :id="'cate'+index"> <view class="cartRightTitle"> ——<text>{{item.catename}}</text>—— </view> <view class="catrRightList"> <view class="catrRightItem" v-for="(child,index) in item.product" :key="index"> <image :src="imgUrl+child.mainimage" mode=""></image> <text>{{child.smalltitle}}</text> </view> <view class="clearFix"></view> </view> </view> </scroll-view> </view> </view> </view> </template> <script> export default { data() { return { cate:[], current:0, rectInfo:[], mainCurrent:0, scrollTop:0 } }, onLoad() { this.getData() }, mounted() { setTimeout(()=>{ this.getRectInfo() },200) }, methods: { getData() { uni.request({ url: '/api/index/cate', success: (res) => { this.cate = res.data.data; console.log(res.data.data); } }); }, // 菜单选择 menuTab(index) { this.current = index this.mainCurrent = index this.scrollTop = index*uni.upx2px(100) console.log(uni.upx2px(100)); }, // 获取元素的top bottom值 getRectInfo() { var top = 0; var bottom = 0; var temp = 0; for(var i =0; i < this.cate.length; i++) { // 通过id获取元素位置元素 let view = uni.createSelectorQuery().in(this).select("#cate"+i); view.fields({ // 返回节点尺寸(width height) size: true, // 返回节点的 scrollLeft scrollTop scrollOffset: true }, data => { console.log(data); top = temp; bottom = temp + data.height; temp += data.height; this.rectInfo[i] = {'top': top,'bottom' : bottom} }).exec(); } }, //添加滚动事件 rightScorll(e) { var scrollTop = e.detail.scrollTop; for(var i = 0; i < this.rectInfo.length; i++) { if( scrollTop > this.rectInfo[i].top && scrollTop < this.rectInfo[i].bottom) { this.current = i this.scrollTop = i*uni.upx2px(100) console.log(this.scrollTop); } } } } } </script> <style> page { background: #f7f7f7; } .search { height: 110rpx; width: 100%; background: #fff; display: flex; justify-content: center; align-items: center; } .searchBox { width: 690rpx; height: 70rpx; border-radius: 10rpx; font-size: 28rpx; color: #999; background: #f7f7f7; } .searchBox image { width: 38rpx; height: 38rpx; margin-right: 12rpx; } .searchBox navigator { display: flex; justify-content: center; align-items: center; height: 70rpx; } .cart { position: absolute; top: 120rpx; bottom: 0; width: 100%; background: red; display: flex; } .cartLeft { width: 200rpx; background: #f7f7f7; height: 100%; } .cartNameLeft { height: 100%; } .cartNameItem { font-size: 28rpx; color: #000; line-height: 100rpx; text-align: center; position: relative; } .cateActive { background: #fff; } .cateLine { position: absolute; width: 4px; height: 30rpx; background: #f7f7f7; top: 35rpx; } .cateActive .cateLine { background: #ba15b8f9; } .cartRight { width: 550rpx; background: #fff; } .cartRightScroll { height: 100%; padding-bottom: 20rpx; } .cartRightTitle { line-height: 86rpx; padding-top: 16rpx; color: #999; font-size: 28rpx; text-align: center; } .cartRightTitle text{ padding: 0 30rpx; } .catrRightItem { width: 33.33%; float: left; margin-top: 20rpx; } .catrRightItem image { width: 160rpx; height: 160rpx; display: block; margin: 0 auto; } .catrRightItem text { line-height: 36rpx; font-size: 24rpx; text-align: center; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clearFix { clear: both; } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。