weui+swiper 滑动底部导航栏切换

最新推荐文章于 2023-02-09 14:39:44 发布
最新推荐文章于 2023-02-09 14:39:44 发布
阅读量8.8k 收藏
点赞数
文章标签： weui swiper web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29598161/article/details/70767571
版权

查看  https://blog.csdn.net/qq_29598161/article/details/78430321

<!DOCTYPE html>

<html lang="ch">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>weui+swiper</title>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="weui/css/weui.min.css"/>
        <!-- 引入 swiper -->
        <link rel="stylesheet" href="weui/css/swiper-3.4.2.min.css">

        <!-- 引入 zepto -->

        <script src="weui/js/zepto.min.js"></script> 


    </head>
<body>
<style>
html{
height:100%;
}  
body{   
max-width:800px;   
margin: 0 auto;
height:100%;
border-right: 1px solid #c5c5c5;
border-left: 1px solid #c5c5c5;
box-shadow:2px 2px 3px #aaaaaa;
}


.img1{
    color: #a0b95d;
font-size: 15px;
text-align: center; 
}
.img2{
    color: #13aed6;
font-size: 12px;
text-align: center;   
}
.img3{
    color: #63d9f7;
font-size: 12px;
text-align: center;   
}
</style>
<div class="weui-tab" id="weuitab" ><!--继承body 、height100%-->
    <div class="swiper-container weui-tab__panel" ><!--Swiper的容器-->
       <div class="swiper-wrapper" ><!--触控的对象--> 
          
          <!----------------weui-panel1----首页-------------------->          
          <div class="swiper-slide" ><!--切换的滑块-->

            <div class="weui-panel"  id="weui-panel1">

                        <div class="weui-panel__hd">
                        <h2 class="page__title">p1</h2>

                        </div>                    

            </div>
          </div>
          
          <!----------------weui-panel2-------p2----------------->
          <div class="swiper-slide"><!--切换的滑块-->
            <div class="weui-panel" id="weui-panel2"  >
                        <!--weui-panel__hd--->
                        <div class="weui-panel__hd">
                        <h2 class="page__title">p2</h2>
                        </div>                       
            </div>             
          </div>
          
          <!----------------weui-panel3-------p3----------------->
          <div class="swiper-slide"><!--切换的滑块-->
            <div class="weui-panel" id="weui-panel3">
                        <div class="weui-panel__hd">
                        <h2 class="page__title">p3</h2>
                        </div>
            </div> 
          </div>
      </div>
   </div>
    
    <!----------------weui-tabbar------------------------>
    <div class="weui-tabbar swiper-no-swiping">
        <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on" id="tabbar1">
            <img src="首页.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item" id="tabbar2">
            <img src="p1.png" alt="" class="weui-tabbar__icon" >
            <p class="weui-tabbar__label">p1</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item" id="tabbar3">
            <img src="p2.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">p2</p>
        </a>
    </div>
    <script type="text/javascript">
    $(function(){
        $('.weui-tabbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
//点击底部导航图标转到指定页面
mySwiper2.slideTo($(this).attr('id').charAt(6)-1,false);
});
    });

</script>
</div> 
    <!-- 引入 swiper -->
     <script src="weui/js/swiper-3.4.2.min.js"></script> 

     <script type="text/javascript">

//页面导航js
var mySwiper = new Swiper('.swiper-container', {
//autoplay: 5000,//可选选项，自动滑动
touchRatio : 0.5,
onSlideChangeStart: function(swiper){
switch(swiper.activeIndex){//滑动页面时底部导航文字也跟着激活
case 0: $("#tabbar1").trigger("click");break;
case 1: $("#tabbar2").trigger("click");break;
case 2: $("#tabbar3").trigger("click");break;
}
//alert(swiper.activeIndex);

},
})

</script>

 

 

 

 

      swiper可以嵌套在导航页面中,演示网址 http://www.wodeditu.com/

snoopy_21
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中WeUI的使用，swiper 制作选项卡
03-29
分享者：萌神哆啦A梦，来自原文地址  首先来看下WeUI的介绍： WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，而且和各组件的样式和微信一样，能够很好地和微信融合在一起，给用户较好的体验。 (此图片来源于网络，如有侵权，请联系删除! ) 1.引入WeUI WeUI的Github地址：WeUI下载地址 下载 weui-
使用swiper, swiperSlide切换
Aa12364567的博客
11-10 452
【代码】使用swiper, swiperSlide切换。
weui+swiper 滑动底部导航栏切换 类似微信切换效果
weixin_42246997的博客
11-20 2189
weui+swiper 滑动底部导航栏切换 类似微信切换效果 2017年11月02日 22:44:51 niuini 阅读数：2135 标签： htmlweuiswiper微信源码 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29598161/article/details/78430321 之前的源码可能不完整，这是完整的 使用...
小程序开发使用weui无效解决方法，<swiper>标签中传入多个数组型数据 ... .
03-29
一：公众号及小程序开发使用weui无效解决方法   分享者：lijie627239856，原文地址  在开发微信公众号过程中,对于不熟悉前端的童鞋们来说,  明明引用了css文件,可以就是没有实际效果,瞬间懵逼  其实这个是微信官方文档weui中的BUG,给出的类名全部是以下这种形式   <a>按钮</a> 实际上,应该是这样的!   <a>按钮</a> 注意:类名中的
LayUI+WeUI+asp.net MVC+MySQL——Web投票管理系统+移动端投票系统.zip
03-12
管理系统是一种通过计算机技术实现的用于组织、监控和控制各种活动的软件系统。这些系统通常被设计用来提高效率、减少错误、加强安全性，同时提供数据和信息支持。以下是一些常见类型的管理系统： ...
一个用weui+html+css页面的例子
03-26
标题 "一个用weui+html+css页面的例子" 暗示了这是一个使用WeUI框架构建的网页项目，其中结合了HTML、CSS和JavaScript技术。WeUI是专为微信小程序和移动Web应用设计的一套轻量级的前端框架，它提供了符合微信视觉...
微信官方WeUI5+WeChat开发者工具+教程文档
04-12
weui包说明：①weui标准版： weui-master.zip ②weui小程序版：weui-wxss-master.zip ③jQuery weui: jquery-weui-build.zip ④vue weui: vum-master.zip 。附微信官方开发者工具和教程说明文档。 所有资源全部来自...
注册页面weui+html+css+js
最新发布
03-21
注册页面weui+html+css+js
基于uniapp+WeUI+colorUI开发设计的一个多平台网上挂号系统源码(微信小程序、支付宝小程序)+项目说明.zip
12-28
基于uniapp+WeUI+colorUI开发设计的一个多平台网上挂号系统源码(微信小程序、支付宝小程序)+项目说明.zip 【项目介绍】 该项目是基于uniapp+WeUI+colorUI开发设计的一个多平台网上挂号系统；该系统主要通过使用...
基于JQuery的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素，代码简介，扩展性好。)
简单就是美
05-31 5502
基于Query的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素，代码简介，扩展性好。) 想在移动端做一个简洁的类似幻灯片切换的功能，在网上找了很多幻灯片的切换插件，功能太多了而且不好用。只要简简单单的左右切换就可以啦。
关于weui中swiper插件navbar/tab中使用轮播失效问题
qq_32369465的博客
06-19 2349
在使用weui的中的选项卡的中每一个选项卡中使用swiper轮播功能，会发现只有其中一个tab初始化了（也就是只有其中一个可以进行轮播，图片切换），需要在初始化中添加observer:true,//修改swiper自己或子元素时，自动初始化swiper  observeParents:true,//修改swiper的父元素时，自动初始化swiper  完整代码如下：$(function (){  ...
原生小程序WEUI导航背景随滚动条渐变色
清云
01-20 6632
原生小程序导航随滚动条渐变色，利用 rgba 实现 背景 透明到不透明
微信小程序-swiper的使用（干货拿来即用！）
HaiJun_Aion的博客
03-12 9769
好久没更新博客了，今天遇到一个坑，坑了一下午，准备把它记录下来，以便别人也能快速的解决问题。学校项目需要小程序开发，最近把小程序看了，把官方开发指南过了一遍，看了一个黑马的小程序视频，其实我大部分都是看的黑马的视频，黑马有的视频是不错的，去年寒假的时候看了node，那位讲师是真不错啊，后续我追着看了他的讲的Vue，讲的特别细，很耐心。有想看的，下方留言。 开始入坑 Swiper 先上效果图 ...
微信小程序中 使用swiper 滑动切换一级、二级导航
m0_55969466的博客
02-09 2168
其中遇到一个大问题使我放弃了swiper的使用，其中就是swiper有一个固定高度不太好处理，最终使用了touch事件去处理触摸移动，之后会再写一篇文章记录。
结合swiper实现选项卡（菜单可拖动）
shi__Yu的博客
11-05 1976
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
移动web最简洁的滑动效果Swipe JS（适合初学者）
热门推荐
xiongxianhe的专栏
10-11 11万+
之前一直都是后台开发，最近要做一个前台相关的项目，
jq weui 滚动加载的坑
weixin_30407613的博客
06-09 579
1.一般情况下使用官网给个demo就可以了，如下： var loading = false; //状态标记 $(document.body).infinite().on("infinite", function() { if(loading) return; loading = true; setTimeout(function() { $("#list").ap...
JQuery WEUI Select 组件增加搜索栏
06-03
JQuery WEUI Select组件本身不提供搜索栏功能，但你可以通过以下步骤实现： 1. 在页面中添加一个搜索框，例如： ``` <div class="weui-search-bar" id="searchBar"> <form class="weui-search-bar__form"> <div class="weui-search-bar__box"> <i class="weui-icon-search"></i> <input type="search" class="weui-search-bar__input" placeholder="搜索" required=""> <a href="javascript:" class="weui-icon-clear"></a> </div> <label class="weui-search-bar__label"> <i class="weui-icon-search"></i> <span>搜索</span> </label> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> </div> ``` 2. 给Select组件添加一个点击事件，在该事件中显示搜索框并隐藏Select组件，例如： ``` $('#selectBtn').on('click', function () { $('#searchBar').show(); $('#select').hide(); }); ``` 3. 给搜索框的取消按钮添加一个点击事件，在该事件中隐藏搜索框并显示Select组件，例如： ``` $('#searchCancel').on('click', function () { $('#searchBar').hide(); $('#select').show(); }); ``` 4. 在搜索框的输入事件中，根据输入内容筛选Select组件的选项，例如： ``` $('.weui-search-bar__input').on('input', function () { var value = $(this).val().toLowerCase(); $('#select .weui-select__option').each(function () { var optionValue = $(this).text().toLowerCase(); if (optionValue.indexOf(value) > -1) { $(this).show(); } else { $(this).hide(); } }); }); ``` 通过以上步骤，你就可以在JQuery WEUI Select组件中添加搜索栏功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值