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

    千次阅读 2019-08-03 00:30:44
    WXML: <scroll-view class="scroll-view_H" scroll-x style="width: 100%"> <block wx:for="{{menu}}" wx:key="menu"> <...-- 加了data-前缀会在currentTarget的dataset中找到index属性(可以不叫...

    WXML:

    <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
        <block wx:for="{{menu}}" wx:key="menu">
          <!-- 加了data-前缀会在currentTarget的dataset中找到index属性(可以不叫index) -->
          <view class="scroll-view-item_H {{currentTab==index? 'tabActive' : ''}}" ontap="changeCurrentTab" data-index="{{index}}">{{item}}</view> 
        </block>
    </scroll-view>
    
    <view id="tabWrap"> 
      <view class="bg-red {{currentTab==0? 'show' : 'hidden'}}">1111111</view>
      <view class="bg-yellow {{currentTab==1? 'show' : 'hidden'}}">22222</view>
      <view class="bg-green {{currentTab==2? 'show' : 'hidden'}}">33333</view>
      <view class="bg-pink {{currentTab==3? 'show' : 'hidden'}}">44444</view>
      <view class="bg-orange {{currentTab==4? 'show' : 'hidden'}}">55555</view>
      <view class="bg-blue {{currentTab==5? 'show' : 'hidden'}}">66666</view>
      <view class="bg-blue  {{currentTab==5? 'show' : 'hidden'}}">66666</view>
    </view>

    JS:

    Page({
      /**
       * 页面的初始数据
       */
      data: {
        currentTab:0,
        menu:[
          '111',
          '222',
          '333',
          '444',
          '555',
          '666'
        ]  
        
      },
      changeCurrentTab(a){
        console.log(a.currentTarget.dataset.index);
        this.setData({
          currentTab : a.currentTarget.dataset.index
        })   
      }
    
    
    })

    setData({...},[callback])将数据从逻辑层发送到视图层(异步),同时也会改变对应的 this.data.XX 的值(同步)。

    data中放的数据在页面初次渲染的时候使用, 不能直接通过this.data.xxx修改值后动态地渲染到页面,下面这样写虽然能改变currentTab的值,但是不会重新渲染到页面上!!!而且用setData()里面的变量可以先不在data中定义,我上面是为了给它赋一个初值为0,让刚进来默认第一个就是选中状态才定义的,但是用this.data必须先定义。

    changeCurrentTab(a){
      console.log(a.currentTarget.dataset.index);
      this.data.currentTab = a.currentTarget.dataset.index;
    },

    WXSS:

    .scroll-view_H{
      white-space: nowrap;
      margin-top: 30rpx;
    }
    .scroll-view-item_H{
      width: 150rpx;
      display: inline-block;
      text-align: center;
     
    }
    #tabWrap{
      width: 750rpx;
      margin-top: 20rpx;
      position: relative;
    
    }
    #tabWrap view{
      width:750rpx;
      height: 500rpx;
      position: absolute;
      top: 0;
      left: 0;
    }
    .bg-red{
      background: #ff0000;
    }
    .bg-green{
      background: #00ff00;
    }
    .bg-yellow{
      background: #ffff00;
    }
    .bg-blue{
      background: #0000ff;
    }
    .bg-pink{
      background: #ff80c2;
    }
    .bg-orange{
      background: #fd9d21;
    }
    
    .tabActive{
      color:#258c47;
    }
    .show{
      display: block;
    }
    .hidden{
      display: none;
    }

     

    展开全文
  • 小程序 tab切换

    2018-01-29 17:08:34
    index.wxml index.js switchNav: function(event) { var cur = event.currentTarget.dataset.current; if (this.data.currentTab == cur) { return false; } else { this.setData({ cur

    index.wxml

    <view class="{{currentTab==1?'active1':''}}" data-current="1" bindtap="switchNav">
    index.js

    switchNav: function(event) {
        var cur = event.currentTarget.dataset.current;
        if (this.data.currentTab == cur) { return false; }
        else {
          this.setData({
            currentTab: cur
          })
        }
      },

    注:原来一直没做对,是因为这里获取dataset的值,是用currentTarget,而不是target,与js不同,坑了我几十分钟。

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

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

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

    展开全文
  • 小程序tab切换及swiper滑动 效果 : 点击上面的菜单栏可以切换相应的内容,滑动内容的时候,菜单栏也会跟着切换。 <view class="my-order"> <view class="{{current == index ? 'change': ' '}}" wx:for...

    做了个简单的双向切换效果

    tab和swiper 切换

    效果 : 点击上面的菜单栏可以切换相应的内容,滑动内容的时候,菜单栏也会跟着切换。

    <view class="my-order">
      <view class="{{current == index ? 'change': ' '}}" wx:for="{{title}}" data-index="{{index}}" bindtap='change'>{{item}}
        <view></view>
      </view>
    </view>
    
    <swiper current="{{current}}" bindchange='swiperChange'>
      <swiper-item wx:for="{{order}}">
        <view class="all">
        </view>
      </swiper-item>
    </swiper>
    
    .my-order{
      width: 750rpx;
      height: 50rpx;
      border-bottom: 10rpx solid #f0f0f0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 30rpx;
    }
    
    
    .change view{
      width: 50%;
      border-bottom: 1rpx solid #b88f64;
      padding-bottom: 10rpx;
      margin-left: 20rpx;
    }
    
    .all{
      width:710rpx;
      height: 297rpx;
      margin: 20rpx auto;
      background-color: pink;
    }
    
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        title: ["我要", "天天", "开心", "哦~"],
        current: 0,
        index: 0,
        id: 0,
        order:[1,2,3,4]
      },
      change: function (e) {
        this.setData({
          current: e.currentTarget.dataset.index,
        })
      },
      swiperChange(e) {
        let current = e.detail.current;
        this.setData({
          current: current,
    
        })
        console.log(current)
      },
    })
    

    转载 https://blog.csdn.net/weixin_42886276/article/details/81838901

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

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

    千次阅读 2019-05-08 14:22:27
    wxml: <view class='body'> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active-tab':''}}" data-current="0" bindtap="clickTab">全部</view> <...
  • 微信小程序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切换

    千次阅读 2018-01-17 09:30:27
    设置背景颜色就直接在page里设置 page {...tab切换: navigator 页面链接 传参的格式为url="路径?title={{item.title}}" 多个用&&连接 下个页面接收参数: wxml: view class="container
  • 小程序tab切换,内容高度自适应

    千次阅读 2018-11-12 17:49:46
    &lt;view class='aboutusContainer'&gt; &lt;image src='/assets/images/company.png' class='companyLogo'&gt;&lt;/image&gt; &lt;view class='tabContainer'&...tab-item {{...
  • 今天在小程序开发时遇到了一个小问题,首先在两个tab页面中都有用到Echarts图表,在页面加载完成时,两个页面的图表也完成绘制。于是就出现了如图问题: 页面完成加载,显示正常 tab切换,该页面的图表缩成了一坨 ...
  • tab"&gt; &lt;scroll-view class="nav" scroll-x="true" scroll-left="{{scrollLeft}}"&gt; &lt;block wx:for="{{allTitle}}" wx:for-index="...
  • 这个问题困扰了我几天,在小程序中运用tab页面切换,但是只在第三个tab页有用到Echarts图表: 当切换至第三页时就出现了下面的情况,图表缩成一团: 解决方法就是在图表外层的view上面加上条件,代码如下: <...
  • 微信小程序Tab切换下面的图表显示

    千次阅读 2018-09-16 17:03:37
    之前没有怎么做过小程序,最近公司需要刚上来就做图表,这对于我来说是一个挑战。 在没做之前觉得没什么,但是后来有一个很大的bug。就是在做Tab切换的时候,我发现页面不管是上下还是左右滑动的时候图表会悬浮在...
  • <swiper class="tab-box " current="{{current}}" duration="300" onChange="switchTab"> <swiper-item a:for="{{q_type}}" a:key="{{index}}" class="tab-content"> {{item.question}} clicktab(e){ ...
  • 微信小程序 tab切换展示不同的内容

    千次阅读 2019-02-21 10:22:25
    index.wxml ...tab-left" &gt; &lt;view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1" bindtap="tab"&gt;人
  • <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for-item="0" wx:for-index="0" class="tab-content"> 0 ...
  • 微信小程序tab切换功能的实现

    千次阅读 2020-03-11 09:21:08
    1、效果图 ...view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">设备故障报修</view> <view class="s...
  • 小程序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切换时候,出现的echarts渲染堆积到一块的问题 如何解决呢。我们从两个思路来解决。 第一个思路:只有在切换到当前tab对应的页面时该页面的图表才会加载。那就在包裹echarts图的盒子上加一个判断...
  • i-row class="tab_question"><i-col span="24" i-class="col-class"><i-tabs current="{{ current }}" color="#f759ab" bindchange="handleChange" ><i-tab wx:for="{{type}}" wx...
  • 微信小程序Tab切换

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

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,199
精华内容 32,079
关键字:

小程序tab切换