【微信小程序】 tabs切换时自动定位到点击的元素

 重点是设置 scroll-into-view ，值为点击时元素的ID（id不能以数字开头）

<view class="type_box"> 
    <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%" 	scroll-with-animation="{{true}}" scroll-into-view="{{scrollinto}}">
        <view class="conten_box" wx:for="{{typeList}}" data-index="{{index}}" bindtap="changeType" id="{{'tab'+index}}">
            <view class="fz12 btn {{index==currentTab?'active':''}}"> {{item.name}} </view>
        </view>
    </scroll-view>
</view>

/* pages/home/top/index.wxss */
.btn {
    background-color: #CCCCCC;
    color: #ffffff;
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
}

.scroll-view_H{
    white-space: nowrap;
  }
  .type_box{
      padding: 20rpx;
  }
  .type_box .conten_box{
    display:inline-block;
    margin: 0 6rpx;
    text-align: center;
  }
.active{
    border:1px solid #cf6365;
    background-color: #F3E1E0;
    color: #cf6365;
}

// pages/home/top/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        scrollinto:"tab0",
        currentTab:0,
        typeList:[
            {name:"全部"},
            {name:"精品"},
            {name:"化妆品"},
            {name:"珠宝"},
            {name:"黄金"},
            {name:"特色"},
            {name:"全部2"},
            {name:"全部"},
            {name:"全部3"},
            {name:"全部4"},
            {name:"全部5"},
            {name:"全部6"},
        ]
    },

    changeType(e){
        let index = e.currentTarget.dataset.index;
        this.setData({
            currentTab:index,
            scrollinto:'tab'+index
        })
    },
    //返回上一页
    backPage(){
        wx.navigateBack({
            delta: 1
        });
    },
 
})