有一些重要的关键点请看上一篇文章
主要用到scroll-into-view 如果你想让他回顶部 直接用scroll-top即可
话不多说,看代码
wxml
[html]
view plain
copy
- <scroll-view scroll-y="true" scroll-into-view="{{toView}}">
- <view class="brand" wx:for="{{brandList}}">
- <view class="line"></view>
- <view id="{{item.wordindex}}" 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>
wxjs
[javascript]
view plain
copy
- // pages/order/car/add_car/car_brand/car_brand.js
- var app = getApp()
- Page({
- data: {
- "brandList": [],
- "wordindex": [],
- "toView": '#',
- },
- onLoad: function (options) {
- var that = this;
- // 页面初始化 options为页面跳转所带来的参数
- app.func.req('getCarBrand?cx=1', function (res) {
- if (res.data.result == 'false') {
- console.log('false');
- that.wetoast.toast({
- title: res.data.msg,
- duration: 2000
- })
- } else {
- that.setData({
- brandList: res.data.brandList,
- wordindex: res.data.brandList,
- });
- var cData = that.data.brandList;
- cData[0].wordindex = "#";//先修改json值
- that.setData({ //再set值
- wordindex: cData
- })
- }
- }, function (res) {
- });
- },
- 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);
- }
- })
wcss:
[css]
view plain
copy
- /* 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;
- }
其中有几个点需要注意
由于我获取的接口数据第一个数组为常用品牌,而右边所以呢为#
如下图
所以当我走完onLoad()生命周期的时候, 我写了两个数组, 一个数组负责左边的title , 一个数组负责右边索引
那么问题来了
当你右边索引数组中,其中一个值改变的时候应该怎么变呢
see it..
[javascript]
view plain
copy
- var cData = that.data.brandList;
- cData[0].wordindex = "#";//先修改json值
- that.setData({ //再set值
- wordindex: cData
- })