精华内容
下载资源
问答
  • 题目:手撸tab切换swiper动画效果 话不多,直接上代码截图! index.wxml截图如下: index.wxss截图如下: app.wxss截图: index.js截图如下: 代码上传到远程码云仓库,如有需要的朋友可clone或者下载...

    上周约了一家面试公司,面试官出了一个很奇葩的上机面试题~

    题目:手撸tab切换swiper动画效果

    话不多,直接上代码截图!

    index.wxml截图如下:

    index.wxss截图如下:

     app.wxss截图:

    index.js截图如下: 

    效果图gif如下: 

    代码上传到远程码云仓库,如有需要的朋友可clone或者下载文件~ 地址:https://gitee.com/FISH_FLYING/swiper-demo

     

     
    展开全文
  • 微信小程序tab切换效果

    千次阅读 2018-09-07 11:47:33
    微信小程序tab切换效果简单实现方法案例 wxml <view class='a_bar '> <text class="{{selectednow?'active':'default'}}" bindtap="selectednow&...

    微信小程序中tab切换效果简单实现方法梨子
    这里写图片描述

    wxml

    <view class='a_bar '>
        <text class="{{selectednow?'active':'default'}}" bindtap="selectednow">京东</text>
        <text class="{{selectednext?'active':'default'}}" bindtap="selectednext">天猫</text>
    </view>
    
    <view class="{{selectednow?'show':'hidden'}}">京东子内容</view>
    <view class="{{selectednext?'show':'hidden'}}">天猫子内容</view>
    

    wxss

    .a_bar{
        position: relative;
    }
    .more_chanpin .a_bar text{
        width: 375rpx;
        float: left;
        height: 88rpx;
        background: #F5F5F5;
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
        color: #A1A1A1;
    }
    .more_chanpin .a_bar text.active{
        background: #E4E4E4;
        color: #353849;
    }

    js

    Page({
     data: {
            // tab 切换
            selectednow: true,
            selectednext: false
        },
        // tab 切换
        selectednow: function (e) {
            this.setData({
                selectednext: false,
                selectednow: true
            })
        },
        selectednext: function (e) {
            this.setData({
                selectednow: false,
                selectednext: true
            })
        },
    
    })

    希望对有需要的人提供帮助~~~

    展开全文
  • 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现简介解决过程 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 ...

    微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介

    看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能

    像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论

    解决过程

    1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用标签,内容使用,其中的使用方法和参数希望自行参考api文档,不过多解释

    布局代码如下:

    wxml:

    <view class="container">
        <!-- tab导航栏 -->
        <!-- scroll-left属性可以控制滚动条位置 -->
        <!-- scroll-with-animation滚动添加动画过渡 -->
        <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
            <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
                <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">
    				<text>{{navItem}}</text>
    		</view>
            </block>        
        </scroll-view>
        <!-- 页面内容 -->
        <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">        
            <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
                {{tabItem}}
            </swiper-item>
        </swiper>
    </view>
    

    wxss:

    /**index.wxss**/
    page{
        width: 100%;
        height: 100%;
    }
    .container{
        width: 100%;
        height: 100%;
    }
    .nav {
        height: 80rpx;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        line-height: 80rpx;
        background: #f7f7f7;
        font-size: 16px;
        white-space: nowrap;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .nav-item {
        width: 20%;
        display: inline-block;
        text-align: center;
    }
    .nav-item.active{
        color: red;
    }
    .tab-box{
        background: greenyellow;
        padding-top: 80rpx;
        height: 100%;
        box-sizing: border-box;
    }
    .tab-content{
        overflow-y: scroll;
    }
    

    js:

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
        data: {
            motto: 'Hello World',
            userInfo: {},
            hasUserInfo: false,
            canIUse: wx.canIUse('button.open-type.getUserInfo'),
            navData:['精选','男生','女生','图书','听书','漫画','VIP','免费'],
            currentTab: 0,
            navScrollLeft: 0
        },
        //事件处理函数
        onLoad: function () {
            if (app.globalData.userInfo) {
                this.setData({
                    userInfo: app.globalData.userInfo,
                    hasUserInfo: true
                })
            } else if (this.data.canIUse) {
                // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                // 所以此处加入 callback 以防止这种情况
                app.userInfoReadyCallback = res => {
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    })
                }
            } else {
                // 在没有 open-type=getUserInfo 版本的兼容处理
                wx.getUserInfo({
                    success: res => {
                        app.globalData.userInfo = res.userInfo
                        this.setData({
                            userInfo: res.userInfo,
                            hasUserInfo: true
                        })
                    }
                })
            }
    
    
            wx.getSystemInfo({
                success: (res) => {
                    this.setData({
                        pixelRatio: res.pixelRatio,
                        windowHeight: res.windowHeight,
                        windowWidth: res.windowWidth
                    })
                },
            })       
        },
        switchNav(event){
            var cur = event.currentTarget.dataset.current; 
            //每个tab选项宽度占1/5
            var singleNavWidth = this.data.windowWidth / 5;
            //tab选项居中                            
            this.setData({
                navScrollLeft: (cur - 2) * singleNavWidth
            })      
            if (this.data.currentTab == cur) {
                return false;
            } else {
                this.setData({
                    currentTab: cur
                })
            }
        },
        switchTab(event){
            var cur = event.detail.current;
            var singleNavWidth = this.data.windowWidth / 5;
            this.setData({
                currentTab: cur,
                navScrollLeft: (cur - 2) * singleNavWidth
            });
        }
    })
    
    展开全文
  • 本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下 分析 1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。 2...

    本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下

    分析

    1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。

    2、swiper组件的current组件用于控制当前显示哪一页

    3、swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页

    4、需要获取设备的宽度以及高度以便与导航栏切换的滑动

     

    wxml:

    <view class="container">
        <!-- tab导航栏 -->
        <!-- scroll-left属性可以控制滚动条位置 -->
        <!-- scroll-with-animation滚动添加动画过渡 -->
        <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
            <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
                <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
            </block>        
        </scroll-view>
        <!-- 页面内容 -->
        <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">        
            <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
                {{tabItem}}
            </swiper-item>
        </swiper>
    </view>

    wxss:

    page{
        width: 100%;
        height: 100%;
    }
    .container{
        width: 100%;
        height: 100%;
    }
    .nav {
        height: 80rpx;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        line-height: 80rpx;
        background: #f7f7f7;
        font-size: 16px;
        white-space: nowrap;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .nav-item {
        width: 20%;
        display: inline-block;
        text-align: center;
        height: 74rpx;
        color: #333;
        font-size: 28rpx;
        position: relative
    }
    .nav-item.active{
        color: red;
        font-size: 32rpx;
        font-weight: bold;
    }
    .nav-item.active::after{
      content: "";
      position: absolute;
      width: 50rpx;
      height: 5rpx;
      left: 34%;
      top: 70rpx;
      background-color: red
    }
    .tab-box{
        background: greenyellow;
        margin-top: -100rpx;
        height: 100%;
        box-sizing: border-box;
        width: 100%;
    }
    .tab-content{
        overflow-y: scroll;
    }
    

    js:

    const app = getApp()
    
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        navData: [
          {
            text: '首页'
          },
          {
            text: '健康'
          },
          {
            text: '情感'
          },
          {
            text: '职场'
          },
          {
            text: '育儿'
          },
          {
            text: '纠纷'
          },
          {
            text: '青葱'
          },
          {
            text: '上课'
          },
          {
            text: '下课'
          }
        ],
        currentTab: 0,
        navScrollLeft: 0
      },
    
      onLoad:function(){
        //获取设备的宽高,以便滑动
        wx.getSystemInfo({
          success: (res) => {
            this.setData({
              pixelRatio: res.pixelRatio,
              windowHeight: res.windowHeight,
              windowWidth: res.windowWidth
            })
          }
        })
      },
    
      //事件处理函数
      switchNav(event) {
        var cur = event.currentTarget.dataset.current;
        //每个tab选项宽度占1/5
        var singleNavWidth = this.data.windowWidth / 5;
        //tab选项居中                            
        this.setData({
          navScrollLeft: (cur - 2) * singleNavWidth
        })
        if (this.data.currentTab == cur) {
          return false;
        } else {
          this.setData({
            currentTab: cur
          })
        }
      },
      switchTab(event) {
        var cur = event.detail.current;
        var singleNavWidth = this.data.windowWidth / 5;
        this.setData({
          currentTab: cur,
          navScrollLeft: (cur - 2) * singleNavWidth
        });
      }
    })
    

    最后的效果:

     

    展开全文
  • 微信小程序 点击切换tab跟随动画 <view class='tabbox'> <view wx:for="{{title}}" class='tab {{currentIndex==index?"tabTrue":""}}' bindtap='changeTab' data-aa='{{index}}'> {{item}} </...
  • -- scroll-with-animation滚动添加动画过渡 --> <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}} </block> <!-- 页面内容 -->...
  • 微信小程序切换tab动画执行问题

    千次阅读 2017-11-07 16:32:55
    微信小程序的开发和H5开发有很多差异。当页面内有“打开”“收起”这样的往复动画的时候,我们一般使用类名来控制动画,然后在js的事件中去改变类名。如下图。 这样做的效果还是不错的,但是,如果当页面中有...
  • 微信小程序Tab选项卡切换大集合

    万次阅读 2018-09-23 18:10:37
    代码地址如下:... 一、前期准备工作 软件环境:微信开发者工具 ...1、基本需求。 实现用户自定义弹框 带动画动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容...
  • 主要为大家详细介绍了微信小程序实现tab左右切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序tab切换效果

    万次阅读 多人点赞 2016-10-19 15:50:41
    微信小程序tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码:    系统提醒  优惠...
  • 本文介绍移动端中常用的tab导航栏下划线动画,仅针对点击切换不支持滑动切换 html部分: {{menu}} CSS部分 .menu-box{ width: 15%;height: 80rpx;font-size: 16px;display:flex;flex-direction: column;align-...
  • 主要为大家详细介绍了微信小程序实现登录注册切换效果,简易版tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序实现tab和swiper切换结合效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 需求:小程序常见的简单带线tab切换,线条滑动动画组件。 实现思路:v-for循环tab项,绝对定位线条,每次点击,运用'transform': 'translateX(**px)',切换位置,在加上一些过渡效果。 难点:点击获得每次移动的...
  • 效果图如下所示: wxml <scroll scroll-x=true class=ip_tab_comtainer> <view class=ip_tab_comtainer_padd> ...'ip_tab_item_s':'ip_tab_item_n'}} bindtap=onIpItemClick wx:key={{ip.id}} data-item={{ip
  • <- wxml -> <view class="youhui"> <view class="{{_num==0?'active':''}}" data-index='0' bindtap='toggle'> 未使用 </view> <view class="{{_num==1?'acti...
  • -- tab导航栏 --&gt; &lt;!-- scroll-left属性可以控制滚动条位置 --&gt; &lt;!-- scroll-with-animation滚动添加动画过渡 --&gt; &lt;scroll-view scroll-x="true" class=&q
  • -- tab框 --> <view class="nav_title"> <view class="nav_tab"> <!-- 如果选中的下表等于当前的索引,就使用active class名,否则class名为common --> <view wx:for="{{list}}" wx:...
  • 文件结构 代码 <view class="checktabs"> <view class="item"> <view class="{{isTabs == 1 ? 'active' : ''}}" data-flag="1" bindtap="checkTap"> <image src="{{isTabs =.../image&...
  • { id: 2, name: "两个字", nameSize: '2' }, { id: 3, name: "三个字", nameSize: '3' }, { id: 4, name: "四个字", nameSize: '4' } ], lineLeft:0,//滑动条外层容器左间距变量 } // 点击tab项触发事件 ...
  • 一步步开发微信小程序 微信小程序开发QQ群:589408404 Demo1 项目目录结构 -- 主体文件 Demo2 项目目录结构 -- 页面 Demo3 创建一个小Demo -- slider小Demo Demo4 创建动画 -- 超酷圆形进度条 补充一些资料 目前而...
  • 微信小程序实现简易版tab切换效果

    千次阅读 2018-04-02 16:13:22
    利用三元运算符实现登录注册效果切换 直接上代码 wxml: &lt;view class='top'&gt; &lt;text class="{{login?'active':''}}" catchtap='login'&gt;登录&lt;/text&gt; &...
  • 最近公司需要优化tab的滚动效果,看了很多大佬的写法,很不明白,就自己研究了一下,虽然简单,但总算实现自己想要的效果了。 html代码: <view class='content'> <scroll-view scroll-x="{{scrollX}}" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,940
精华内容 1,176
关键字:

微信小程序tab切换动画

微信小程序 订阅