左右滚动的内容加点提示。滚动到第二页第二个点点高亮。模拟轮播图效果

1，微信小程序可以使用scroll-view组件。然后利用她的@scroll事件获取到scrollLeft

<scroll-view scroll-x="true" @scroll="scrollPrice">

。。。

</scroll-view>

点点的数量。一页面放了三个块。所以用总的长度处以3.向上取整。

<view class="bottom-dot" v-if="package.length>3">
  <text v-for="i in Math.ceil(package.length/3)" :class="['dot']" ></text>
</view>

.bottom-dot{
  margin-top:25px;
  display: flex;
  align-content: center;
  justify-content: center;
  .dot{
    width: 10px;
    height: 10px;
    background: #E0E0E0;
    border-radius:50%;
    margin-right:10px;
    &.active{
      background:#999999;
    }
  }
}

// 套餐滚动获取高亮显示的点
function scrollPrice(e){
  activeDot.value=Math.ceil(e.detail.scrollLeft/400)
}

2，vue项目中。可以利用ref

<div  ref="srcollpriceA" @scroll="scrollPrice">

???? 。。。

</div>

这里本来我用了和上面一样获取scroll的参数。但是看着她的e.detail.scrollLeft一直是0.所以最后修改用了ref

scrollPrice(){
  let scrollLeft=this.$refs.srcollpriceA.scrollLeft;
  this.activeDot=Math.ceil(scrollLeft/400)
}