好记性不如烂笔头
wxml
<view class="container"> <view class="category-left"> <scroll-view scroll-y="true" style="height:100%"> <block wx:for="{{category}}" wx:key="id"> <view class="catgegory-item {{activeId == item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}} <view wx:if="{{activeId == item.id}}" class="lvtiao"></view> </view> </block> </scroll-view> </view> <view class="category-right"> <scroll-view scroll-y="true" style="height:100%;background-color: #fff;" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll"> <view style="height:24rpx;"></view> <view class="lunbo"> <swiper class="fuli_lunbo" circular="{{true}}" indicator-dots="{{false}}" autoplay="{{true}}" duration="{{1000}}" interval="{{8000}}"> <swiper-item wx:for="{{qing_list}}" wx:key="key"> <image class="shu_tu" src="../../images/baoxiu.png"></image> </swiper-item> </swiper> </view> <view class="categoty-detail"> <block wx:for="{{content}}" wx:key="id"> <view class="catefory-main"> <view class="category-title" id="{{item.id}}">{{item.title}}</view> <view class="category-content"> <view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id"> <image src="{{i.src}}"></image> <view class="mingiz">{{i.text}}</view> </view> </view> </view> </block> </view> </scroll-view> </view> </view>
js
const app = getApp() Page({ data: { qing_list:["1","2"], toView: 'a1', activeId: 'a1', category: [ {name: '新品', id: 'a1'}, { name: '众筹', id: 'a2' }, { name: '小米手机', id: 'a3' }, { name: 'redmi手机', id: 'a4' }, { name: '黑鲨游戏', id: 'a5' }, { name: "手机配件", id: 'a6' }, { name: '电视', id: 'a7'}, { name: '电脑8', id: 'a8' }, { name: '电脑9', id: 'a9' }, { name: '电脑10', id: 'a10' }, { name: '电脑11', id: 'a11' }, { name: '电脑12', id: 'a12' }, { name: '电脑13', id: 'a13' }, ], content: [ { title: '- 新品 -', options: [ { src: '../../images/baoxiudan.png',id: '001',text: 'redmi8aaaaaaaaaaaaaaaaaaaaa'}, { src: '../../images/baoxiudan.png', id: '002', text: 'redmi8A' }, { src: '../../images/baoxiudan.png', id: '003', text: '小米9pro 5G'}, { src: '../../images/baoxiudan.png', id: '004', text: 'redmi8'}, { src: '../../images/baoxiudan.png', id: '005',text: 'redmi8' } ], id: 'a1' }, { title: '- 众筹 -', options: [ { src: '../../images/duihuan.png', id: '006', text: 'redmi8' }, { src: '../../images/duihuan.png', id: '007' ,text: 'redmi8'}, { src: '../../images/duihuan.png', id: '008', text: 'redmi8' }, { src: '../../images/duihuan.png', id: '009',text: 'redmi8' } ], id: 'a2' }, { title: '- 小米手机 -', options: [ { src: '../../images/dizhi.png', id: '006', text: 'redmi8' }, { src: '../../images/dizhi.png', id: '007', text: 'redmi8' }, { src: '../../images/dizhi.png', id: '008', text: 'redmi8' }, { src: '../../images/dizhi.png', id: '009', text: 'redmi8' } ], id: 'a3' }, { title: '- redmi手机 -', options: [ { src: '../../images/jiebang.png', id: '006', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '007', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '008', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '009', text: 'redmi8' } ], id: 'a4' }, { title: '- 黑鲨游戏 -', options: [ { src: '../../images/baoxiudan.png',id: '001',text: 'redmi8'}, { src: '../../images/baoxiudan.png', id: '002', text: 'redmi8A' }, { src: '../../images/baoxiudan.png', id: '003', text: '小米9pro 5G'}, { src: '../../images/baoxiudan.png', id: '004', text: 'redmi8'}, { src: '../../images/baoxiudan.png', id: '005',text: 'redmi8' } ], id: 'a5' }, { title: '- 手机配件 -', options: [ { src: '../../images/duihuan.png', id: '006', text: 'redmi8' }, { src: '../../images/duihuan.png', id: '007' ,text: 'redmi8'}, { src: '../../images/duihuan.png', id: '008', text: 'redmi8' }, { src: '../../images/duihuan.png', id: '009',text: 'redmi8' } ], id: 'a6' }, { title: '- 电视 -', options: [ { src: '../../images/dizhi.png', id: '006', text: 'redmi8' }, { src: '../../images/dizhi.png', id: '007', text: 'redmi8' }, { src: '../../images/dizhi.png', id: '008', text: 'redmi8' }, { src: '../../images/dizhi.png', id: '009', text: 'redmi8' } ], id: 'a7' }, { title: '- 电脑 8-', options: [ { src: '../../images/jiebang.png', id: '006', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '007', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '008', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '009', text: 'redmi8' } ], id: 'a8' }, { title: '- 电脑 9-', options: [ { src: '../../images/jiebang.png', id: '006', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '007', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '008', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '009', text: 'redmi8' } ], id: 'a9' }, { title: '- 电脑 10-', options: [ { src: '../../images/jiebang.png', id: '006', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '007', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '008', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '009', text: 'redmi8' } ], id: 'a10' }, { title: '- 电脑 11-', options: [ { src: '../../images/jiebang.png', id: '006', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '007', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '008', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '009', text: 'redmi8' } ], id: 'a11' }, { title: '- 电脑 12-', options: [ { src: '../../images/jiebang.png', id: '006', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '007', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '008', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '009', text: 'redmi8' } ], id: 'a12' }, { title: '- 电脑 13-', options: [ { src: '../../images/jiebang.png', id: '006', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '007', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '008', text: 'redmi8' }, { src: '../../images/jiebang.png', id: '009', text: 'redmi8' } ], id: 'a13' }, ], }, //事件处理函数 onl oad: function () { this.setData({ toView: 'a1', heightArr: [] }) let query = wx.createSelectorQuery(); query.selectAll('.catefory-main').boundingClientRect((rect)=> { rect.forEach(ele => { this.calculateHeight(ele.height); }) }).exec(); }, clickItem(e) { this.setData({ activeId: e.currentTarget.dataset.id, toView: e.currentTarget.dataset.id }) }, scroll(e) { let scrollHeight = e.detail.scrollTop; let index = this.calculateIndex(this.data.heightArr,scrollHeight); this.setData({ activeId: 'a'+index }) }, // 计算滚动的区间 calculateHeight(height) { if(!this.data.heightArr.length) { this.data.heightArr.push(height) }else { // this.data.heightArr.forEach(ele => { // height += ele // }) height += this.data.heightArr[this.data.heightArr.length-1] this.data.heightArr.push(height); } }, // 计算左边选中的下标 calculateIndex(arr, scrollHeight) { let index= ''; for(let i =0;i<arr.length;i++) { if (scrollHeight >= 0 && scrollHeight < arr[0]){ index = 0; }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){ index = i; } } return index+1; } })
wxss
.container { padding: 0; width: 100%; height: 100vh; display: flex; flex-direction: row; align-items: flex-start; } .category-left { height: 100%; width: 22%; box-sizing: border-box; } .catgegory-item { width: 100%; padding: 20rpx 0; font-size: 26rpx; text-align: center; font-family: PingFang SC; font-weight: 400; line-height: 2; color: #333333; position: relative; } .lvtiao { position: absolute; width: 8rpx; height: 28rpx; background: #23C890; opacity: 1; top: 50%; left: 0; transform: translate(-50%, -50%); } .active-item { background-color: #fff; font-size: 28rpx; font-family: PingFang SC; font-weight: bold; line-height: 2.1; color: #212121; } .category-right { flex: 1; height: 100%; } .category-content { display: grid; grid-template-columns: repeat(auto-fill, 190rpx); } .category-title { text-align: center; width: 525rpx; height: 67rpx; line-height: 67rpx; text-align: left; margin-left: 14rpx; border-bottom: 0.5rpx solid #BFBFBF; font-size: 32rpx; font-family: PingFang SC; font-weight: bold; color: #333333; opacity: 1; margin-top: 20rpx; } .content-item { display: flex; flex-direction: column; padding: 20rpx; text-align: center; font-size: 30rpx; } .content-item image { width: 150rpx; height: 150rpx; } .content-item .mingiz { height: 33rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: bold; line-height: 24rpx; color: #333333; opacity: 1; margin-top: 21rpx; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 轮播 */ .lunbo { width: 486rpx; height: 196rpx; border: 1rpx solid #707070; opacity: 1; border-radius: 16rpx; margin-left:32rpx; margin-bottom:67rpx; } .lunbo .fuli_lunbo{ height:100%; width:100%; } .lunbo .shu_tu{ height:100%; width:100%; }