先看看效果
.wxml :
<view class="container"> <!--左侧栏--> <scroll-view class='scroll_left' scroll-y="true"> <view class="nav_left"> <block wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this"> <!--当前项的id等于item项的id，那个就是当前状态--> <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开右侧侧滑栏使用--> <view class="nav_left_items {{curNav == idx ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" id="{{idx}}"> <view class="{{curNav == idx ? 'isSelect' : 'noSelect'}}" data-index="{{index}}" data-id="{{item.id}}" id="{{idx}}"></view> <view data-index="{{index}}" data-id="{{item.id}}" id="{{idx}}" class="item-name {{curNav == idx ? 'item-name-select' : ''}}" bindtap="switchRightTab">{{itemName[0].name}}</view> </view> </block> </view> </scroll-view> <!--右侧栏--> <!--如果使用 scroll-into-view 属性，必须设置 scroll-view 的高度，且最好是动态获取屏幕高度 --> <!-- scroll-into-view 属性 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 --> <scroll-view scroll-y="true" class="scroll_right" style="height:{{winHeight}}px;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true"> <view class="nav_right"> <view class='mink' wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this" bindscroll="scrollTop"> <view class='header-img' id='{{idx}}'> <image src='http://qn.sdhui.net/file/upload/96d72afaa5634ece9dba5eb9370af0b6'></image> </view> <view class='minl'>{{itemName[0].name}}</view> <view class='view-items'> <view class='view-items-item' wx:for="{{itemName}}" wx:if="{{index>0}}"> <navigator url="../detail/detail?id={{item.desc}}" hover-class="other-navigator-hover"> <view class='view-items-item-view1'> <image src="{{item.picture}}"></image> </view> <view class='view-items-item-view2'> <text>{{item.desc}}</text> </view> </navigator> </view> </view> </view> </view> </scroll-view></view>
.js:
var list = require('../../utils/list.js')const app = getApp();Page({ data: { // 左侧点击类样式 curNav: 'A1', }, onReady: function () { // 生命周期函数--监听页面初次渲染完成 var listChild1 = list.List[0]; console.log(listChild1) var that = this; // 获取可视区高度 wx.getSystemInfo({ success: function (res) { that.setData({ list: listChild1, winHeight: res.windowHeight, }) } }) }, //点击左侧 tab ，右侧列表相应位置联动 置顶 switchRightTab: function (e) { var id = e.target.id; console.log(id) this.setData({ // 动态把获取到的 id 传给 scrollTopId scrollTopId: id, // 左侧点击类样式 curNav: id, }) }})
.css:
.container { position: relative; width: 100%; height: 1220rpx; background-color:white; color: #939393; } /*左侧栏主盒子*/ .nav_left{ /*设置行内块级元素（没使用定位）*/ display: inline-block; width: 100%; height: 100%; /*主盒子设置背景色为灰色*/ background: #fff; text-align: center; /* position: fixed; */ left: 0; top: 0; /* border-top: 1rpx solid #dedede; 上侧线条*/} .isSelect{ height: 50%; width: 2%; background: red; }.item-name{ width: 98%; display: flex; justify-content: center; align-items: center; background: #f0f4f7;}.item-name-select{ width: 98%; background: #fff; font-weight: bold; color: #ed1000;}/*左侧栏list的item*/ .nav_left .nav_left_items{ background: #fff; /*每个高30px*/ height: 100rpx; /*垂直居中*/ line-height: 100rpx; /*再设上下padding增加高度，总高42px*/ /* padding: 15rpx 0; */ /*只设下边线*/ /* border-bottom: 1px solid #dedede; */ display: flex; flex-direction: row; /*文字14px*/ align-items: center; font-size: 26rpx; color: #8b8888; /* font-weight: */} /*左侧栏list的item被选中时*/ .nav_left .nav_left_items.active{ /*背景色变成白色*/ /* background: #f0f4f7; */ color: #ed1000; /* border-left: 3px solid #ed1000; */ } /*右侧栏主盒子*/ .scroll_right{ /*右侧盒子使用了绝对定位*/ position: fixed; top: 0; right: 0; overflow: auto; flex: 1; /*宽度75%，高度占满，并使用百分比布局*/ width: 75%; height: 100%; padding: 0 20rpx 20rpx 20rpx; box-sizing: border-box; }/* 隐藏滚动条 */::-webkit-scrollbar { width: 0; height: 0; color: transparent;}.mink::after{ display:block;content:'';clear:both; }/* .jiul,.jiul image{ width: 100%; height: 300rpx; } */.minl{ font-weight: bold; font-size: 29rpx; color: rgb(17, 16, 16); text-align: left; line-height: 60rpx; float: left; display: flex; justify-content: center; align-items: center; /* background: #f0f4f7; */ width: 100%; height: 50rpx;}.mink{ width: 100%; background: #fff; height: 100%; /* border: 1rpx solid #dedede; */}/*右侧栏list的item*/ .nav_right_items{ /*浮动向左*/ float: left; /*每个item设置宽度是33.33%*/ width: 50%; /* height: 160rpx; */ text-align: center; color: #ed1000;} .nav_right_items image{ /*被图片设置宽高*/ width: 60px; height: 50px; margin-top: 15rpx;} .nav_right_items text{ /*给text设成块级元素*/ display: block; margin-top: 5rpx; margin-bottom: 10rpx; font-size: 26rpx; /*设置文字溢出部分为...*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }/** 自定义其他点击态样式类 **/.other-navigator-hover{ background:#dedede;}.scroll_left{ width:25%; height:100%; background:#fff; text-align:center; position: fixed; left: 0;top: 0}.header-img{ height: 100px; width: 100%;border-radius: 10rpx;}.header-img image{ width: 100%; height: 100%; border-radius: 10rpx; }.view-items{ width: 100%; height: 100%; display: flex; flex-wrap: wrap; margin-bottom: 70rpx;}.view-items-item{ width:50%; height: 100%; display: flex; flex-direction: column; margin-top: 15rpx;}.view-items-item-view1{display: flex;justify-content: center;align-items: center;margin-bottom: 8rpx;}.view-items-item-view2{ display: flex;justify-content: center;align-items: center;}.view-items-item-view1 image{ width: 60px; height: 60px; margin-top: 15rpx;}.view-items-item-view2 text{ font-size: 26rpx; }
