精华内容
下载资源
问答
  • 小程序tab切换效果

    千次阅读 2018-09-23 17:43:00
    小程序实现tab切换很简单,只需要完成两部分。 1.页面 2.js触发时间 先上效果: image.png 接下来介绍页面代码: 控制切换的Tab <view class="swiper-tab"> <view class=&...
        

    小程序实现tab切换很简单,只需要完成两部分。
    1.页面
    2.js触发时间

    先上效果:

    5317394-78debe4962d6d343.png
    image.png

    接下来介绍页面代码:

    控制切换的Tab

    <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>
    

    要切换的内容

    <view class = "{{currentTab == 0 ? 'show':'hidden'}}" >
        <scroll-view>
          <text>暂无内容1</text>
        </scroll-view>
      </view>
      <view class = "{{currentTab == 1 ? 'show':'hidden'}}" >
        <scroll-view>
          <text>暂无内容2</text>
        </scroll-view>
      </view>
      <view class = "{{currentTab == 2 ? 'show':'hidden'}}">
        <scroll-view>
          <text>暂无内容3</text>
        </scroll-view>
      </view>
    

    js触发事件

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

    页面样式

    /* pages/about/about.wxss */
    .about_page{
      margin: 0 10px;
    }
    .swiper-tab{
        width: 100%;
        /* border-bottom: 2rpx solid #ccc; */
        text-align: center;
        height: 88rpx;
        line-height: 88rpx;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        color: #ccc;
        font-size: 16px;
    }
    .swiper-tab-item{
        width: 30%; 
        color:#434343;
    }
    .active{
        color:#F65959;
        /* border-bottom: 4rpx solid #F65959; */
        font-size: 16px;
        font-weight: bold;
    }
    .juzhong{
      margin: 0 auto;
    }
    .domain{
      background-color: #fff;
      height: 100%;
      margin:0 10px;
    }
    .show{
      display: block;
    }
    .hidden{
      display: none;
    }
    
    展开全文
  • 微信小程序tab切换效果

    千次阅读 2018-09-07 11:47:33
    微信小程序tab切换效果简单实现方法案例 wxml &amp;lt;view class='a_bar '&amp;gt; &amp;lt;text class=&quot;{{selectednow?'active':'default'}}&quot; bindtap=&quot;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切换效果

    万次阅读 多人点赞 2016-10-19 15:50:41
    微信小程序tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码:    系统提醒  优惠...

    微信小程序之tab切换效果,如图:

    最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能)

    .wxml代码:

    <view class="body">
      <view class="nav bc_white">
        <view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>
        <view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
      </view>
      <view class="{{selected?'show':'hidden'}}">for system</view>
      <view class="{{selected1?'show':'hidden'}}">for activity</view>
    </view>

    .wxss代码

    page{background-color:#edf0f3;}
    .nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
    .default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
    .red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
    .show{display:block;text-align:center;line-height:200rpx;}
    .hidden{display:none;text-align:center;line-height:200px;}

    .js代码:

    Page({
        data:{
            selected:true,
            selected1:false
            },
        selected:function(e){
            this.setData({
                selected1:false,
                selected:true
            })
        },
        selected1:function(e){
            this.setData({
                selected:false,
                selected1:true
            })
        }
    })

    展开全文
  • 小程序tab切换遇到的问题

    今天初次接触小程序 , 写了一个 tab 切换 , 一开始全是 text 标签进行切换 , 但是有一个是带图片的 , 如图所示 :
    tab切换
    切换后的效果想必大家都知道 , 如下图所示 :
    tab切换要求
    然后我就把活动那个 text 标签改成了 view 并包住了 image 和 text , 结果点击的时候没反应
    上网查后 , 解决方法为将事件中的
    e.target.dataset.current 改为 e.currentTarget.dataset.current

    你的问题解决了吗 ? 本人纯属为了将遇到的问题做个笔记 , 希望可以帮到更多人 !

    展开全文
  • 效果图 Wxml <!-- tab框 --> <view class="nav_title"> <view class="nav_tab"> <!-- 如果选中的下表等于当前的索引,就使用active class名,否则class名为common --> <view wx:for=...
  • 微信小程序实现简易版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切换及swiper滑动 效果 : 点击上面的菜单栏可以切换相应的内容,滑动内容的时候,菜单栏也会跟着切换。 <view class="my-order"> <view class="{{current == index ? 'change': ' '}}" wx:for...
  • 微信小程序之swiper制作tab切换效果

    千次阅读 2017-11-02 15:52:12
    http://www.52jb.net/biancheng/11116.html 实现效果图: swiper制作tab切换 index.html class="swiper-tab"> view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swich
  • 微信小程序Tab切换

    万次阅读 2017-07-17 16:26:26
    做过android的都知道在android里面实现Tab切换非常简单,...在上一篇文章中我提到的小程序练手项目就实现了Tab切换效果,具体效果图可以参考文章微信小程序入门项目。实现思路翻看小程序的文档可以发现,微信为我们提供
  • 小程序 - tab左右切换效果

    千次阅读 2018-09-02 10:35:56
    // 控制record-box随鼠标切换调整位置 if (app.globalData.userInfo) { this .setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if ( this .data.canIUse) { app....
  • 小程序 - tab两栏切换效果

    千次阅读 2018-09-05 11:01:08
    // 选项卡切换 clickTab: function (e) { var that = this this .setData({ currentTab: e.target.dataset.current }) that.loadPager( 1 ) }, // 判断页面属性跳转 navigatorUrl: function (e...
  • 效果图: WXML文件 &lt;view class="tab"&gt; &lt;scroll-view class="nav" scroll-x="true" scroll-left="{{scrollLeft}}"&gt; &lt;block wx:for=...
  • 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现简介解决过程 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 ...
  • WX小程序TAB切换 / 小程序商品分类

    千次阅读 2018-03-29 09:50:57
    微信小程序实现tab切换功能实现商城分类功能1.实现上图, 分类切换功能 2. 思路: 通过点击tab栏, 来显示和隐藏对应的内容部分3.注意事项: 调取数据时, 需要和后台沟通清楚, 接口结构1. view层&lt;view class='...
  • 小程序顶部tab切换

    千次阅读 2018-08-20 12:03:49
    首先我们看效果 接下来是wxml部分代码 &amp;lt;!-- tab框 --&amp;gt; &amp;lt;view class=&quot;nav_title&quot;&amp;gt; &amp;lt;view class=&quot;nav_tab&quot;&...
  • 微信小程序tab切换功能的实现

    千次阅读 2020-03-11 09:21:08
    1、效果图 2、index.wxml <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">设备故障报修</view> <view ...
  • 小程序tab切换列表页(基于mpvue)

    千次阅读 2019-06-17 15:36:59
    tab切换列表 效果: 实现想法: 头部tab使用div,fixed固定头部; 下面内容使用的是swiper和swiper-item实现左右切换功能; 接着在swiper-item中使用scroll-view实现列表的滚动(设置y轴滚动),滚动加载借助scroll...
  • 小程序tab切换 点击左右滑动

    千次阅读 2019-04-20 17:02:00
    {{tabContent}} " wx:key= " " bindtap= ' myOrderDetails ' > <!-- 列表 --> class = ' listBox ' > class = ' listTop ' > ' {{item.goodsImg}} ' class = ' goodsImg ' > class = ' infor ' > ...
  • 小程序选项卡tab切换

    千次阅读 2018-07-23 17:51:49
    view class='tab flex flexSa alignC'&gt; &lt;view class='tab_li {{currentData == 0 ? "tab_on" : ""}}' data-current="0" bindtap='changeTab'&gt; &lt;view&...
  • 实现tab+swiper(viewpage+tab效果的实现,tab可左右滑动,跟着页面的滑动而改变位置的实现。tab也可点击切换page
  • 如图,就是当tab切换时候,出现的echarts渲染堆积到一块的问题 如何解决呢。我们从两个思路来解决。 第一个思路:只有在切换到当前tab对应的页面时该页面的图表才会加载。那就在包裹echarts图的盒子上加一个判断...
  • 实现头部tab点击切换效果 一、实际效果 二、代码参考 test.wxml <!-- 头部 --> <view class="tabcontent"> <block wx:for="{{tabs}}" wx:key="*this"> <view id="{{index}}" class=...

空空如也

空空如也

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

小程序tab切换效果