weui+swiper 滑动底部导航栏切换 类似微信切换效果

weui+swiper 滑动底部导航栏切换 类似微信切换效果

2017年11月02日 22:44:51 niuini 阅读数:2135 标签: htmlweuiswiper微信源码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29598161/article/details/78430321

之前的源码可能不完整,这是完整的

使用的是

WeUI v1.1.1 (https://github.com/weui/weui)

Swiper 3.4.2 ( http://www.idangero.us/swiper/)


版本不同,效果可能不一样

使用weui 时 看官方文档 有多页面切换和底部导航 缺找不实现的方法 然后就用swiper 切换实现




    
        
        
        weui demo
        
        
        
        
        
         

    


切换页面用jq或者zepto 给点击的底部导航图标设置class(激活),然后用Swiper自带的函数实现 页面切换

$(this).attr(‘id’).charAt(6)-1 这步是获得索引编号,原来写的没改,这里写的太过复杂了,可以简化

效果大概就是截图这样了,微信风格

效果图-首页 
效果图-3

swiper可以嵌套在导航页面中

之前做的网页 演示网址 http://wodeditu.com/

你可能感兴趣的:(移动端布局)