小程序横向scroll-view组件自动滚动到某个view scroll-into-view 没有效果

原因：

1.处理完数据之后，需要更新一次page对象中的data，

1. that.setData({

2. toview: 'target'

3. })

2.html中data-node-id和data-index两种属性不能同时存在，

3.html中必须设置id='{{item.id}}'属性

代码如下：

html：

<view class="scroll_box">

<scroll-view class="scroll-view_x" scroll-x='true' scroll-into-view="{{toview}}" scroll-with-animation="true" >

<view class="item_list" class="{{item.isChoose?'choosed':'not_choose'}}" wx:for="{{jindutiao1}}" wx:key='key' id='{{item.id}}' bindtap='showJiaoHu' data-node-id='{{item.nodeId}}'>

<image class="{{item.nodeType==3?'lockPoint jinduPng':'jinduPng'}}" mode='scaleToFill' src="{{item.imgurl}}" ><text class="{{item.nodeType==3?'lockPointText nodeName1':'nodeName1'}}">{{item.nodeName}}</text></image>

<text>{{item.num}}步{{item.nodeId}}</text>

<!-- <text>{{item.price}}</text> -->

</view>

<view class="bigs1" >

<view class='hui'>

<view class="zhongJianSelect"></view>

<block wx:for="{{jindutiao}}">

<view class='viewsmall'></view>

<view class="zhongJianSelect"wx:if="{{item.statu}}"></view>

<view class="zhongJian"wx:else></view>

</block>

</view>

<view class='kedudian'style="left:{{width*6}}%">

<!-- 用户头像 -->

<image mode='scaleToFill' src="{{userNode.Img}}" class='jinduPng'></image>

<text class='cantuanNumber'>已走{{userNode.num}}步</text>

</view>

<view class='huang' style="width:{{width}}%"></view>

</view>

</scroll-view>

</view>

js：

jindutiao: function () {

var that = this;

var jindutiao = that.data.jindutiao;

var num = that.data.num;

var p = 0;

for (var i = 0; i < jindutiao.length; i++) {

if (jindutiao[i].num > num) {

p = i;

break;

}

}

if (i == jindutiao.length) { p = i; }

for (var j = 0; j < p; j++) {

jindutiao[j].statu = true;

}

if (p == 0) {

num = 0.5 / jindutiao.length * 100;

 

} else if (jindutiao[p - 1].num < num) {

num = (p + 0.5) / jindutiao.length * 100;

//毕竟不是当前进度等分，所以让他在等于8，7，6的时候也能在中间。就加0.5

} else {

num = p / jindutiao.length * 100;

//当前黄色进度长度就是当前人数除以总人数乘以100，就是进度条宽度的百分比。

}

that.setData({

width: num,

p: p,

jindutiao: jindutiao,

toview: "target",

})

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

 

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

let that = this;

// that.jindutiao();

//用户登录

if (app.globalData.thirdSessionKey) {

that.setData({

thirdSessionKey: app.globalData.thirdSessionKey,

isLogin: true

})

} else {

// 由于 login 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

app.loginReadyCallback = res => {

that.setData({

thirdSessionKey: app.globalData.thirdSessionKey,

isLogin: true

})

}

}

// console.log(that.data.thirdSessionKey)

wx.request({

url: worldCupHost + 'findNodes',

method: 'POST',

data: {

thirdSessionKey: that.data.thirdSessionKey

},

header: { 'content-type': 'application/json' },

success: function (res) {

//加上锁点的图片

var nodeList = res.data.data.nodes

var nodeId=res.data.data.userNode.nodeId

for (var i = 0; i < nodeList.length; i++) {

if ((nodeList[i]['nodeType'] == 3) && (nodeId > nodeList[i]['nodeId'])) {

nodeList[i]['imgurl'] ='../../../images/huodong/dakai.png'

} else if ((nodeList[i]['nodeType'] == 3) && (nodeId <= nodeList[i]['nodeId'])){

nodeList[i]['imgurl'] = '../../../images/huodong/weikai.png'

}

}

that.setData({

nodeId: nodeId,

num: res.data.data.num,

userNode: res.data.data.userNode,

jindutiao: res.data.data.nodes.slice(1),

jindutiao1: nodeList,

toview: "target"

})

that.jindutiao();

}

})

},