uni小程序scroll-view自定义指示点

uni scorll-view自定义滚动条，即隐藏自带的用小圆点更美观指示点替代。

image.png

以下都为uni中的组件方法，并非原生的小程序中。因此bingscroll已经没有这方法了。
方法有限制，暂时只能2块左和右区域。
scroll-into-view 滑动到的容器
scrolltoupper 滑动左侧
scrolltolower 滑动右侧
show-scrollbar 取消默认展示

scroll-into-view="{{toView}}"
        scroll-with-animation="true"
        @scrolltoupper="toLeft"
        @scrolltolower="toRight"
        :scroll-x="true"
        enhanced="true"
        :show-scrollbar="false"

ps：https://uniapp.dcloud.io/component/scroll-view.html

0 核心

 <scroll-view
        scroll-into-view="{{toView}}"
        scroll-with-animation="true"
        @scrolltoupper="toLeft"
        @scrolltolower="toRight"
        :scroll-x="true"
        enhanced="true"
        :show-scrollbar="false"
        class="home__navs-scroll"
      >
       <view
           v-for="i in =2"
          class="home__navs-container"
          :id="'navs' + i">

    </view>
....
</scroll-view>
...
methods: 
tapTo(index) {
      console.log(index);
      this.toView = "navs" + index;
    },
    toLeft() {
      this.toView = "navs0";
    },
    toRight() {
      this.toView = "navs1";
    },

1 data中

toView:'default'

2 scss

 <view class="pagni u-flex u-row-center" v-if="showNavs">
        <view
          :class="{ act: toView == 'navs0' || toView == 'default' }"
          class="btn "
          @click="tapTo(0)"
          data-into="nav0"
        >
        </view>
        <view
          class="btn"
          :class="{ act: toView == 'navs1' }"
          @click="tapTo(1)"
          data-into="nav1"
        >
        </view>
      </view>
...
.pagni {
  margin-top:-10rpx;
  margin-bottom: 20rpx;
  // border: 1px solid red;
  .dot {
    padding: 10rpx 10rpx;
    opacity: 0.4;
    // border:1px solid blue;
    &:first-child {
      padding-left:20rpx;
    }
     &:last-child {
      padding-right:20rpx;
    }
    .btn {
      width: 12rpx;
      height: 12rpx;
    }
  }
  .act {
    opacity: 1;
  }
}