小程式之導航滾動動畫——scroll-view

記錄一下小程式導航滾動實作方法：

html

<scroll-view class="container"
             scroll-x="{{true}}"
             scroll-into-view="{{activeId}}"
             scroll-with-animation="{{true}}">
  <text class="type {{index == magazineIndex ? 'active' : ''}}"   
        wx:for="{{magazineTypeArr}}" 
        wx:key="*this"
        catch:tap="onTap"
        data-index="{{index}}"
        id="{{'magazine' + index}}" >{{item}}</text>
</scroll-view>
           

css

.container{
   box-sizing: border-box;
   width: 750rpx;
   padding: 30rpx;
   background: #fff;
  white-space: nowrap;
 }
 .type{
   font-size: 40rpx;
   color: #888;
   padding: 0 30rpx;
 }
 .active{
   color: #000;
 }
           

js

data: {
    magazineTypeArr: ['輕芒', '興趣', '物質', '世界', '新事', '靈魂'],
    magazineIndex:0,
    activeId:'magazine0'
  },
methods: {
    onTap(e){
      const index = e.currentTarget.dataset.index;
      this.setData({
        magazineIndex : index,
        activeId:`magazine${index == 0 ? 0 : index - 1}`
      })
      console.log(index);
    }
  }
           

哦了~