先看看效果
.wxml :
<view class="container">? <!--左側(cè)欄-->? <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">? ? ? ? <!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id臂拓，那個(gè)就是當(dāng)前狀態(tài)-->? ? ? ? <!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置彭沼，使用data-id設(shè)置每個(gè)item的id值，供打開右側(cè)側(cè)滑欄使用-->? ? ? ? <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>? <!--右側(cè)欄-->? <!--如果使用 scroll-into-view 屬性阴孟，必須設(shè)置 scroll-view 的高度浮还，且最好是動(dòng)態(tài)獲取屏幕高度 -->? <!-- scroll-into-view 屬性 值應(yīng)為某子元素id（id不能以數(shù)字開頭）稽坤。設(shè)置哪個(gè)方向可滾動(dòng)剩拢，則在哪個(gè)方向滾動(dòng)到該元素 -->? <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: {? ? // 左側(cè)點(diǎn)擊類樣式? ? curNav: 'A1',? },? onReady: function () {? ? // 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成? ? var listChild1 = list.List[0];? ? console.log(listChild1)? ? var that = this;? ? // 獲取可視區(qū)高度? ? wx.getSystemInfo({? ? ? success: function (res) {? ? ? ? that.setData({? ? ? ? ? list: listChild1,? ? ? ? ? winHeight: res.windowHeight,? ? ? ? })? ? ? }? ? })? },? //點(diǎn)擊左側(cè) tab ，右側(cè)列表相應(yīng)位置聯(lián)動(dòng) 置頂? switchRightTab: function (e) {? ? var id = e.target.id;? ? console.log(id)? ? this.setData({? ? ? // 動(dòng)態(tài)把獲取到的 id 傳給 scrollTopId? ? ? scrollTopId: id,? ? ? // 左側(cè)點(diǎn)擊類樣式? ? ? curNav: id,? ? })? }})
.css:
.container {? position: relative;?? width: 100%;?? height: 1220rpx;?? background-color:white;?? color: #939393;?}? /*左側(cè)欄主盒子*/?.nav_left{?? /*設(shè)置行內(nèi)塊級(jí)元素（沒使用定位）*/?? display: inline-block;?? width: 100%;?? height: 100%;?? /*主盒子設(shè)置背景色為灰色*/?? background: #fff;?? text-align: center;?? /* position: fixed;? */? left: 0;? top: 0;? /* border-top: 1rpx solid #dedede; 上側(cè)線條*/}?.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;}/*左側(cè)欄list的item*/?.nav_left .nav_left_items{?? background: #fff;? /*每個(gè)高30px*/?? height: 100rpx;?? /*垂直居中*/?? line-height: 100rpx;?? /*再設(shè)上下padding增加高度够话，總高42px*/?? /* padding: 15rpx 0;? */? /*只設(shè)下邊線*/?? /* border-bottom: 1px solid #dedede;? */? display: flex;? flex-direction: row;? /*文字14px*/? ? align-items: center;? font-size: 26rpx;? color: #8b8888;?? /* font-weight:? */}?/*左側(cè)欄list的item被選中時(shí)*/?.nav_left .nav_left_items.active{?? /*背景色變成白色*/?? /* background: #f0f4f7; */? color: #ed1000;? /* border-left: 3px? solid? #ed1000;? */ }? /*右側(cè)欄主盒子*/?.scroll_right{?? /*右側(cè)盒子使用了絕對(duì)定位*/?? position: fixed;? top: 0;?? right: 0;? overflow: auto;? flex: 1;?? /*寬度75%蓝翰，高度占滿光绕，并使用百分比布局*/?? width: 75%;?? height: 100%;?? padding: 0 20rpx 20rpx 20rpx;?? box-sizing: border-box;?}/* 隱藏滾動(dòng)條 */::-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; */}/*右側(cè)欄list的item*/?.nav_right_items{?? /*浮動(dòng)向左*/?? float: left;?? /*每個(gè)item設(shè)置寬度是33.33%*/?? width: 50%;? /* height: 160rpx;? */? text-align: center;? color: #ed1000;}?.nav_right_items image{?? /*被圖片設(shè)置寬高*/?? width: 60px;?? height: 50px;? margin-top: 15rpx;}?.nav_right_items text{?? /*給text設(shè)成塊級(jí)元素*/?? display: block;?? margin-top: 5rpx;?? margin-bottom: 10rpx;? font-size: 26rpx;?? /*設(shè)置文字溢出部分為...*/?? overflow: hidden;?? white-space: nowrap;?? text-overflow: ellipsis;?}/** 自定義其他點(diǎn)擊態(tài)樣式類 **/.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;? ?}
