想实现点击左侧 级别,右侧跟随滚动,但是试了几次均未实现,下面附上demo

wxml

<scroll-view scroll-y=“true” scroll-into-view="{{toView}}"  style=“height: 6000px;”>  

<view id=’{{item.wordindex}}’ class=“brand” wx:for="{{brandList}}" >  

<view class=“line”></view>  

<view class=“wordindex”>{{item.wordindex}}</view>  

<view class=“line”></view>  

<view class=“brand_block”>  

<view class=“color_view” wx:for="{{item.brand}}" bindtap=“click”>  

<image src="{{item.brandimg}}"></image>  

</view>  

</view>  

</view>  

</scroll-view>  

<view class=“index”>  

<text wx:for="{{wordindex}}" bindtap=“choiceWordindex” data-wordindex="{{item.wordindex}}">  

{{item.wordindex}}

</text>  

</view>

wxss

/* pages/order/car/add_car/car_brand/car_brand.wxss */  

scroll-view {

height: 600px;

float: left;

width: 94%;

}

.wordindex {

line-height: 50rpx;

background: #f7f7f7;

font-size: 14px;

color: #929292;

padding-left: 28rpx;

}

.color_view {

text-align: center;

display: inline-flex;

flex-direction: column;

}

.brand_block {

margin-top: 28rpx;

margin-left: 28rpx;

}

image {

width: 140rpx;

height: 140rpx;

margin-right: 24rpx;

margin-bottom: 24rpx;

border-style: solid;

border-width: 1rpx;

border-color: #ededed;

}

.index {

float: right;

position: fixed;

right: 0;

margin-top: 20%;

margin-right: 10rpx;

color: #e0004a;

font-size: 11px;

}

.index text {

display: flex;

line-height: 18rpx;

}

js

var app = getApp()

Page({

data: {

“brandList”: [],

“wordindex”: [],

“toView”: ‘a’,

},

onLoad: function (options) {

var that = this;

that.setData({

brandList: [{ wordindex: ‘a’ }, { wordindex: ‘b’ }, { wordindex: ‘c’ }, { wordindex: ‘d’ }, { wordindex: ‘e’ }, { wordindex: ‘f’ }, { wordindex: ‘g’ }, { wordindex: ‘h’ }, { wordindex: ‘i’ }, { wordindex: ‘j’ }, { wordindex: ‘k’ }, { wordindex: ‘l’ }, { wordindex: ‘o’ }, { wordindex: ‘p’ }, { wordindex: ‘q’ }, { wordindex: ‘r’ }, { wordindex: ‘s’ }, { wordindex: ‘t’ }, { wordindex: ‘w’ }],

wordindex: [{ wordindex: ‘a’ }, { wordindex: ‘b’ }, { wordindex: ‘c’ }, { wordindex: ‘d’ }, { wordindex: ‘e’ }, { wordindex: ‘f’ }, { wordindex: ‘g’ }, { wordindex: ‘h’ }, { wordindex: ‘i’ }, { wordindex: ‘j’ }, { wordindex: ‘k’ }, { wordindex: ‘l’ }, { wordindex: ‘o’ }, { wordindex: ‘p’ }, { wordindex: ‘q’ }, { wordindex: ‘r’ }, { wordindex: ‘s’ }, { wordindex: ‘t’ }, { wordindex: ‘w’ }]})

},

onReady: function () {

// 页面渲染完成  

},

onShow: function () {

// 页面显示  

},

onHide: function () {

// 页面隐藏  

},

onUnload: function () {

// 页面关闭  

},

click: function () {

wx.navigateTo({

url: ‘/pages/order/car/add_car/car_model/car_model’,

})

},

choiceWordindex: function (event) {

let wordindex = event.currentTarget.dataset.wordindex;

if (wordindex == ‘#’) {

this.setData({

toView: ‘常用品牌’,

})

} else {

this.setData({

toView: wordindex,

})

}

console.log(this.data.toView);

}

})