微信小程序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