微信小程序swiper個性化定制

 

2016.11.11tabs切換，添加滑動動畫。

/*/*/*/*/*/*/*/*/*//*/*/*/*/*/*/*/*/*//*/*/*/*/*/*/*/*/*//*/*/*/*/*/*/*/*/*//*/*/*/*/*/*/*/*/*//*/*/*/*/*/*/*/*/*/

 

2016.11.10日新增，tabs切換，點擊菜單切換，滑動切換。

---------------------------------------------------------------------------------------------------------------------

微信小程序swiper個性化定制，微信已經提供的組件不能應付當前的開發需求。

因此，對微信小程序swiper的指示器做了下修改。

效果如下:

 

對樣式文件即*.wxss文件做如下修改

page .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: -4rpx;
}

page .wx-swiper-dot{
    width: 252rpx;
    display: inline-flex;
    height: 18rpx;
    vertical-align: sub;
  
}




page .wx-swiper-dot::before{
    content: '';
    background: #e5e5e5;
    flex-grow: 1;
}

page .wx-swiper-dot-active::before{
    content: '';
    background:rgba(240,0,0,0.8);
    flex-grow: 1;
}

 

源碼地址如下：

https://github.com/toxufe/wx-swiper.git

https://git.coding.net/tongxiaodie/wx_swiper.git