精华内容
下载资源
问答
  • 微信小程序选项卡
    2021-10-20 08:44:57

    index.wxml:

    <!--index.wxml--> 
    <view class="swiper-tab"> 
     <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">导航1</view> 
     <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">导航2</view> 
     <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">导航3</view> 
    </view> 
     
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 
     <!-- 内容1 --> 
     <swiper-item> 
     <view>我是内容1</view> 
     </swiper-item> 
     <!-- 内容2 --> 
     <swiper-item> 
     <view>我是内容2</view> 
     </swiper-item> 
     <!-- 内容3--> 
     <swiper-item> 
     <view>我是内容3</view> 
     </swiper-item> 
    </swiper> 
    

    index.wxss:

    /**index.wxss**/ 
    .swiper-tab{ 
     width: 100%; 
     border-bottom: 2rpx solid #777777; 
     text-align: center; 
     line-height: 80rpx;} 
    .swiper-tab-list{ font-size: 30rpx; 
     display: inline-block; 
     width: 33.33%; 
     color: #777777; 
    } 
    .on{ color: #da7c0c; 
     border-bottom: 5rpx solid #da7c0c;} 
     
    .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
    .swiper-box view{ 
     text-align: center; 
    }
    

    index.js:

    //index.js 
    //获取应用实例 
    var app = getApp() 
    Page( { 
     data: { 
     /** 
     * 页面配置 
     */ 
     winWidth: 0, 
     winHeight: 0, 
     // tab切换 
     currentTab: 0, 
     }, 
     onLoad: function() { 
     var that = this; 
     
     /** 
     * 获取系统信息 
     */ 
     wx.getSystemInfo( { 
     
     success: function( res ) { 
     that.setData( { 
      winWidth: res.windowWidth, 
      winHeight: res.windowHeight 
     }); 
     } 
     
     }); 
     }, 
     /** 
     * 滑动切换tab 
     */ 
     bindChange: function( e ) { 
     
     var that = this; 
     that.setData( { currentTab: e.detail.current }); 
     
     }, 
     /** 
     * 点击tab切换 
     */ 
     swichNav: function( e ) { 
     
     var that = this; 
     
     if( this.data.currentTab === e.target.dataset.current ) { 
     return false; 
     } else { 
     that.setData( { 
     currentTab: e.target.dataset.current 
     }) 
     } 
     } 
    })
    
    更多相关内容
  • 微信小程序选项卡页面tabBar切换,现在贡献出代码,希望可以帮助到你们
  • 主要为大家详细介绍了微信小程序实现选项卡功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 滑动选项卡 (源码)微信小程序 滑动选项卡 (源码)微信小程序 滑动选项卡 (源码)微信小程序 滑动选项卡 (源码)微信小程序 滑动选项卡 (源码)微信小程序 滑动选项卡 (源码)微信小程序 滑动选项卡 (源码)微信...
  • 从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能。 微信小程序里没有自带...
  • ———-demo.wxss————   .swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;....swiper-tab-list{ font-size: 30rpx;....swiper-box{ display: block
  • 本文实例为大家分享了微信小程序实现滚动Tab选项卡的具体代码,供大家参考,具体内容如下 最终效果如上。问题: 1、tab标题总共8个,所以一屏无法全部显示。 2、tab内容区左右滑动切换时,tab标题随即做标记...
  • 主要介绍了微信小程序 选项卡的简单实例的相关资料,需要的朋友可以参考下
  • 微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", ...
  • 微信小程序选项卡底线转换滑动动画 展示在我的博客中 https://mp.csdn.net/console/editor/html/104596161
  • 微信小程序 tabs选项卡效果 前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就...
  • 主要为大家详细介绍了小程序选项卡以及swiper套用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序选项卡

    2021-12-16 16:44:17
    <view class="flexad"> <view bindtap="btnbaobei" data-id="{{item.id}}" style="color:{{iads == item.id ? '#027AFF':'#000'}}" wx:for="{{liste}}">{{item.text}}</view>...
    <view class="flexad">
      <view bindtap="btnbaobei" data-id="{{item.id}}" style="color:{{iads == item.id ? '#027AFF':'#000'}}"  wx:for="{{liste}}">{{item.text}}</view>
    </view>
    <view>
    <view wx:if="{{iads==0}}">
    
    
    
    </view>
    <view wx:if="{{iads==1}}">2</view>
    <view wx:if="{{iads==2}}">3</view>
    <view wx:if="{{iads==3}}">4</view>
    </view>
    /* packageA/mybroker/mybroker.wxss */
    .flexad{
      display: flex;
      justify-content: space-around;align-items: center;
      font-size: 28rpx;
      font-weight: 700;
    }
    // packageA/mybroker/mybroker.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        iads:0,
        liste: [{
            text: "待审核",
            id: 0,
          }, {
            text: "待面试",
            id: 1,
          }, {
            text: "已入职",
            id: 2,
          }, {
            text: "无效报备",
            id: 3,
          },
        ]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
      btnbaobei(e){
        console.log(e.currentTarget.dataset.id);
        this.setData({
          iads:e.currentTarget.dataset.id
        })
      }
    })

     

    展开全文
  • 主要为大家详细介绍了微信小程序实现顶部普通选项卡效果,非swiper,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序实现顶部选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 选项卡(数据双层循环)

    千次阅读 2019-06-22 11:49:12
    第一种:swiper选项卡,可点击可滑动(swiper自带了一个150的高度,高度不好控制) ...-- 从接口获取数据写法 index是小程序自带的可以直接用 <view class="tabbox" wx:for="{{detail_data.copywri...

    第一种:swiper选项卡,可点击可滑动(swiper自带了一个150的高度,高度不好控制)

    html

    <!-- 选项卡 -->
    <view class='topTabSwiper'>
    
    <!-- 从接口获取数据写法 index是小程序自带的可以直接用
    		<view class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index">
    			<text  class="tab {{currentData == index ? 'tabBorer' : ''}}"  data-current = "{{index}}" bindtap='checkCurrent'>{{item.title}}</text>
    		</view> 
    -->
    	
    	<view class="tabbox">
    		<text class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>菜单一</text>
    		<text class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>菜单二</text>
    		<text class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>菜单三</text>
    	</view> 
    	
    
    </view>
    
    <swiper   current="{{currentData}}" class='swiper3'  duration="300" bindchange="bindchange">
    <!--从接口获取数据写法
    	<swiper-item wx:for="{{detail_data.copywriting}}" wx:key="index">
    
    		<view class='swiper_con'>
    			<view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">
    				{{cell.title.titlestr}}
    			</view>
    		</view>
    	</swiper-item> 
    -->
    	<swiper-item><view class='swiper_con'>内容一</view></swiper-item>
    	<swiper-item><view class='swiper_con'>内容二</view></swiper-item>  
    	<swiper-item><view class='swiper_con'>内容三</view></swiper-item>
    
    
    
    </swiper>
    <!-- 选项卡 End-->

    js

    data:{
      //选项卡
        currentData: 0,
    }
    /**
     * tab切换
     */
    //swiper切换时会调用
    //获取当前滑块的index
    bindchange: function (e) {
    
        var index = e.detail.current;
        // console.log("滑动"+index)
    
        this.setData({
            currentData: e.detail.current,
    
        })
    },
    //点击切换,滑块index赋值
    checkCurrent: function (e) {
        var index = e.target.dataset.current;
        if (this.data.currentData === e.target.dataset.current) {
            return false;
        } else {
            this.setData({
                currentData: e.target.dataset.current,
    
            })
        }
        // console.log("点击" + index)
    },

    css 这部分不重要 

    .title {width:100%;height:88rpx;background: white;display:flex;align-items:center;justify-content: space-around;}
    .topTabSwiper{height:50rpx;font-size:26rpx;margin-bottom:20rpx;padding:0 40rpx;}
    .topTabSwiper:after{content: ""; clear: both;display: block;}
    .tabbox{float:left; width:20%;text-align:center; }
    .tab{display:block;height:50rpx;line-height:50rpx;width:80%;border-radius:25rpx;color:#292b33;margin:0 auto;}
    .tabBorer {color:#fff;background: -webkit-linear-gradient(left,#ffc20d ,#ffad00); 
    background: -o-linear-gradient(left, #ffc20d ,#ffad00);
    background: -moz-linear-gradient(left, #ffc20d ,#ffad00); 
    background: linear-gradient(to right, #ffc20d ,#ffad00);}
    .topTabSwiper .swiper{width:100%;}
    .swiper_con{width:100%;height: 100%;}

    我的接口数据格式(供参考),循环里套循环取出数据

    最终效果

     

    第二种,只点击

    <view class="swiper-tab">
    <!-- 从接口取数据
    	<view  class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index">
    		<text class="swiper-tab-item {{currentTab== index ?'active':''}}" data-current="{{index}}" bindtap="clickTab">{{item.title}}</text>
    	</view>
    -->
    
    	<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">菜单一</view>
    	<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">菜单二</view>
    
    
    </view>
    
    <!--从接口取数据
    <view wx:for="{{detail_data.copywriting}}" wx:key="index" class = "{{currentTab == index ? 'show':'hidden'}}" >
    	<scroll-view>
    
    		<view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">
    		{{cell.title.titlestr}}
    		</view>
    
    	</scroll-view>
    </view>
    -->
    
    <view class = "{{currentTab == 0 ? 'show':'hidden'}}" >
    	<scroll-view><text>内容2</text></scroll-view>
    </view>
    <view class = "{{currentTab == 1 ? 'show':'hidden'}}">
    	<scroll-view><text>内容3</text></scroll-view>
    </view> 

    js

    dada:{
    currentTab:0,
    }
    
    //点击切换
    clickTab: function (e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.current,
            })
        }
    },

    json格式、样式都与第一种一样

     

     

     

     

     

     

     

     

    展开全文
  • 微信小程序选项卡切换

    万次阅读 2018-01-14 13:18:29
    在开发微信小程序的时候,会遇到选项卡切换,这里有一个小例子,可以做为参考,代码如下 结构部分: view class="swiper-tab"> view class="swiper-tab-item {{currentTab==0?'active':''}}" data-...

    在开发微信小程序的时候,会遇到选项卡切换,这里有一个小例子,可以做为参考,代码如下

    结构部分:

    < view class= "swiper-tab" >
    < view class= "swiper-tab-item {{currentTab==0?'active':''}}" data-current= "0" bindtap= "clickTab" >热点 </ view >
    < view class= "swiper-tab-item {{currentTab==1?'active':''}}" data-current= "1" bindtap= "clickTab" >体育 </ view >
    < view class= "swiper-tab-item {{currentTab==2?'active':''}}" data-current= "2" bindtap= "clickTab" >社会 </ view >
    </ view >

    < swiper current= "{{currentTab}}" duration= "300" bindchange= "swiperTab" >
    < swiper-item >< view >热点 </ view ></ swiper-item >
    < swiper-item >< view >体育 </ view ></ swiper-item >
    < swiper-item >< view >社会 </ view ></ swiper-item >
    </ swiper >
    JS部分

    var app = getApp ()
    Page ({
    data : {
    currentTab : 0
    },
    onLoad : function (options ) {
    // 页面初始化 options为页面跳转所带来的参数

    },
    //滑动切换
    swiperTab : function (e ) {
    var that = this ;
    that .setData ({
    currentTba : e .detail .current
    });
    },
    //点击切换
    clickTab : function (e ) {

    var that = this ;

    if ( this .data .currentTab === e .target .dataset .current ) {
    return false ;
    } else {
    that .setData ({
    currentTab : e .target .dataset .current
    })
    }
    }

    })
    样式部分

    .swiper-tab {
    width: 100% ;
    border-bottom: 2 rpx solid #ccc ;
    text-align: center ;
    height: 88 rpx ;
    line-height: 88 rpx ;
    font-weight: bold ;
    }
    .swiper-tab-item {
    display: inline-block ;
    width: 33.33% ;
    color: red ;
    }
    .active {
    color: aqua ;
    border-bottom: 4 rpx solid red ;
    }

    展开全文
  • 微信小程序 选项卡

    2021-08-06 17:18:36
    微信小程序 选项卡wxhml部分js部分wxss部分 wxhml部分 <!-- 选项卡 --> <view class="cardout"> <view catchtap="changecardleft" class="leftcard {{card==0?'cho':''}}">一级</view> &...
  • 主要介绍了微信小程序 实现tabs选项卡效果实例代码的相关资料,需要的朋友可以参考下
  • <view class="menu_box"> <text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text> <text class='menu2 {{menuTapCurrent=="1"?...
  • 微信小程序 滑动选项卡(截图+源码)微信小程序 滑动选项卡(截图+源码)微信小程序 滑动选项卡(截图+源码)微信小程序 滑动选项卡(截图+源码)微信小程序 滑动选项卡(截图+源码)微信小程序 滑动选项卡(截图+...
  • 主要为大家详细介绍了微信小程序实现单选选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序的tab选项卡的实现效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,996
精华内容 3,998
关键字:

微信小程序选项卡

微信小程序 订阅