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

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

。。。

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

   Math.ceil(package.length/3)" :class="['dot']" >

.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

     。。。

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

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