小程序scroll-view跳转至指定位置

跳转的路径上传参如：id=7

wxml:
<navigator url="../index?id=7" >
      <text>收房</text>
</navigator>

GIF图演示

sw.gif

demo代码

wxml:
<view class="xyj_article">
    <!-- 这是滑动滚动导航 -->
    <scroll-view  scroll-x="true" scroll-into-view="{{ key }}" scroll-with-animation="true">
        <view class="uploadWrap">
            <view  wx:for="{{ arr }}"
                   wx:key="sw"
                   class="{{_num == index ?'upload_Item':'upload_To'}}"
                   id="sw{{ index }}"
                   data-num="{{ index }}"
                   bindtap="clickNum">{{ item.title }}
            </view>
        </view>
    </scroll-view>
</view>

js:
/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
     console.log(this.options.id);//获取传递进来的参数
     /*循环scroll-view 的数据*/
     let arr = [
         {
           "title": 0
         },{
           "title": 1
         },{
           "title": 2
         },{
           "title": 3
         },{
           "title": 4
         },{
           "title": 5
         },{
           "title": 6
         },{
           "title": 7
         },{
              "title": 8
         },{
           "title": 9
         },
     ];
     this.setData({
         arr:arr,
         _num:this.options.id,
         key:"sw"+this.options.id
     });

 }

wxss:
/*滚动*/
.uploadWrap{
  width:100%;
  height:100rpx;
  display: flex;
  display: -webkit-box;
  flex-direction: column;
}
.upload_Item{
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  flex: 1;
  border-top: 2px solid #000
}
.upload_To{
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  flex: 1;
  border-top: 2px solid #fff;
}
/*这个是取消默认滚动条样式*/
::-webkit-scrollbar{width:0px}