小程序 头部导航scroll-view（横向）

wxml

<view class="top-news">
     <view class="self-box" bindtap='logstap'>
         <view class="img-self">
            <image src="https://note.youdao.com/yws/api/personal/file/WEB85274aa3f98b51aabf554f06de3b7893?method=download&shareKey=fa40eb0ef0b793f4cd2ba7333b321b7c"></image>
         </view>
     </view>
     <view class="self-add" bindtap='caseMore'>
         <view class="img-add">
            <image src="https://note.youdao.com/yws/api/personal/file/WEB85274aa3f98b51aabf554f06de3b7893?method=download&shareKey=fa40eb0ef0b793f4cd2ba7333b321b7c"></image>
         </view>
     </view>
      <view class="nav-scroll">
        <scroll-view 
          class="scroll-view-h" 
          scroll-x="true" 
          style="width: 100%" 
          scroll-with-animation="true"
          scroll-into-view="nav-{{catid > 0 ? catid -1 : catid}}">
            <text 
              wx:for="{{data_list}}" 
              wx:key="catid" 
              wx:for-index="index" 
              id="nav-{{item.catid}}" 
              catchtap="caseType"
              data-catid='{{item.catid}}'
              class="nav-name {{item.catid == catid ? 'nav-hover' : ''}}">{{item.catname}}</text>
        </scroll-view>
      </view>
</view>

css

.top-news{width:100%;height: 90rpx;overflow: hidden;background:#f2f2f2;}
.self-box{position: absolute;left:0;height:90rpx;width:80rpx;display: inline-block;background: #f2f2f2;}
.img-self{width:90rpx;height: 90rpx;}
.img-self image,.img-add image{float: left}
.img-add image,.img-self image{width:32rpx;height: 38rpx;margin:29rpx 28rpx;display: block;}
.self-add{position: absolute;right:0;height:90rpx;width:90rpx;display: inline-block;background: #f2f2f2;}
.img-add{width:90rpx;height: 90rpx;}
.scroll-view-h{white-space:nowrap;width: 100%;padding:0 94rpx;box-sizing: border-box;}
.nav-name{display:inline-block;font-size:36rpx;color: #333;padding:20rpx;}
.nav-hover{color: #0068B7;}

js

Page({
  data: {
  },
  caseType: function (e) {
    var that = this;
    that.setData({
      catid: e.currentTarget.dataset.catid,
    })
    wx.setStorage({
      key: 'catid',
      data: e.currentTarget.dataset.catid
    });
  },
  onLoad: function () {
    var that = this;
    // wx.request({
    //   method: 'POST',
    //   url: 'path',
    //   data: '',
    //   header: {
    //     'content-type': 'application/x-www-form-urlencoded'
    //   },
    //   success: function (res) {
    // data_list为请求回来的数据
    that.setData({
      data_list: [
        { catid: '1', catname: '电视剧' },
        { catid: '2', catname: '电影' },
        { catid: '3', catname: '综艺' },
        { catid: '4', catname: '少儿' },
        { catid: '5', catname: '动漫' },
        { catid: '6', catname: 'NBA' },
        { catid: '7', catname: '游戏' },
        { catid: '8', catname: '小说' },
        { catid: '9', catname: '纪律片' },
        { catid: '10', catname: '娱乐' },
        { catid: '11', catname: '新闻' },
      ]
    })
    var data_list = [
      { catid: '1', catname: '电视剧' },
      { catid: '2', catname: '电影' },
      { catid: '3', catname: '综艺' },
      { catid: '4', catname: '少儿' },
      { catid: '5', catname: '动漫' },
      { catid: '6', catname: 'NBA' },
      { catid: '7', catname: '游戏' },
      { catid: '8', catname: '小说' },
      { catid: '9', catname: '纪律片' },
      { catid: '10', catname: '娱乐' },
      { catid: '11', catname: '新闻' },
    ]
    if (wx.getStorageSync('catid')) {
      that.setData({
        catid: wx.getStorageSync('catid')
      });
    } else {
      // 首次加载默认选中第一项
      console.log(data_list[0].catid)
      that.setData({
        catid: data_list[0].catid
      });
    }
    //   }
    // })
  },
  onShow() {
    var that = this;
    if (wx.getStorageSync('catid')) {
      that.setData({
        catid: wx.getStorageSync('catid')
      });
    }
  }
})

注意：以下操作会导致scroll-into-view无效
1、在scroll-view标签上直接绑定
2、在scroll-view标签上绑定变量使用setData在onload时直接赋值
3、scroll-into-view的值以数字开头