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

    2020-07-13 10:05:37
    view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">产品</view> <view class="swiper-tab-list {{currentTab==1 ? ...

    WXML:

    <view class="swiper-tab">
        <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">产品</view>
        <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">金融</view>
        <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">理财</view>
    </view>
    
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
        <swiper-item>
            <view>产品</view>
        </swiper-item>
        <swiper-item>
            <view>金融</view>
        </swiper-item>
        <swiper-item>
            <view>理财</view>
        </swiper-item>
    </swiper>

    WXSS:

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

    JS:

    Page({
        data: {
            winWidth: 0,
            winHeight: 0,
            currentTab: 0,
        },
        onLoad: function() {
    
            var that = this;
    
            /**
             * 获取当前设备的宽高
             */
            wx.getSystemInfo( {
    
                success: function( res ) {
                    that.setData( {
                        winWidth: res.windowWidth,
                        winHeight: res.windowHeight
                    });
                }
    
            });
        },
          
     //  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
                })
            }
        },
    
        bindChange: function( e ) {
    
            var that = this;
            that.setData( { currentTab: e.detail.current });
    
        },
    })

     

    展开全文
  • WX小程序TAB切换 / 小程序商品分类

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

    微信小程序实现tab栏切换功能

    实现商城分类功能


    1.实现上图, 分类切换功能 

    2. 思路: 通过点击tab栏, 来显示和隐藏对应的内容部分

    3.注意事项: 调取数据时, 需要和后台沟通清楚, 接口结构


    1. view层

    <view class='container'>
    <view class='tab'>
    <view class="{{selected?'red':'default'}}" bindtap='selected'>烟花</view>
    <view class="{{selected1?'red':'default'}}" bindtap='selected1'>鞭炮</view>
    <view class="{{selected2?'red':'default'}}" bindtap='selected2'>小产品</view>
    </view>
    <view class="{{selected?'show':'hidden'}}" >
    <view class='tab_l'>
    <block wx:for="{{cateItems}}">
    <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
    </block>
    </view>
    <view class='tab_r'>
    <block wx:for="{{cateItems[curIndex].children}}">
    <view class="nav_right_items">
    <!--界面跳转 -->
    <navigator url="../../detail/detail}}">
    <image src="{{item.image}}"></image>
    <text>{{item.name}}</text>
    </navigator>
    </view>
    </block>
    </view>
    </view>
    <view class="{{selected1?'show':'hidden'}}">
    222
    </view>
    <view class="{{selected2?'show':'hidden'}}">
    333
    </view>
    </view>

    2.逻辑层


    Page({

    /**
    * 页面的初始数据
    */
    data: {
    selected: true,
    selected1: false,
    selected2: false,
    //模拟数据
    cateItems: [
    {
    cate_id: 1,
    cate_name: "全部",
    ishaveChild: true,
    children:
    [
    {
    child_id: 1,
    name: '鞭炮',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    {
    child_id: 2,
    name: '噼里',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    {
    child_id: 3,
    name: '啪啦',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    ]
    },
    {
    cate_id: 2,
    cate_name: "日景",
    ishaveChild: true,
    children:
    [
    {
    child_id: 1,
    name: '鞭炮',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    {
    child_id: 2,
    name: '噼里',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    ]
    },
    {
    cate_id: 3,
    cate_name: "夜景",
    ishaveChild: true,
    children:
    [
    {
    child_id: 1,
    name: '鞭炮',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    {
    child_id: 2,
    name: '噼里',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    {
    child_id: 3,
    name: '啪啦',
    image: "http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg"
    },
    ]
    },
    ],
    curNav: 1,
    curIndex: 0
    },

    //事件处理函数
    switchRightTab: function (e) {
    // 获取item项的id,和数组的下标值
    let id = e.target.dataset.id,
    index = parseInt(e.target.dataset.index);
    // 把点击到的某一项,设为当前index
    this.setData({
    curNav: id,
    curIndex: index
    })
    },

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

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {

    },

    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {
    },

    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function () {
    },

    /**
    * 生命周期函数--监听页面隐藏
    */
    onHide: function () {
    },

    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function () {
    },

    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {
    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {
    },

    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function () {
    }
    })

    3.wxss

    .tab{
    border-bottom: 1px solid #f3f3f3;
    overflow: hidden;
    }
    .tab>view{
    width: 33.33%;
    text-align: center;
    float: left;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    }
    .default{
    color: #000;
    }
    .red{
    color: #ea3e39;
    border-bottom: 1px solid #ea3e39;
    }
    .show{
    display:block;
    text-align:center;
    height: 100%;
    }
    .hidden{
    display:none;
    text-align:center;
    height: 100%;
    }

    .tab_l{
    width: 25%;
    float: left;
    font-size: 14px;
    border-right: 1px solid #f3f3f3;
    height: 100%;
    box-sizing: border-box;
    }
    .tab_r{
    width: 75%;
    float: left;
    font-size: 14px;
    }
    .tab_l view{
    line-height: 46px;
    border-bottom: 1px solid #f3f3f3;
    }
    .nav_left_items{
    height: 40px;
    line-height: 40px;
    padding: 6px 0;
    border-bottom: 1px solid #dedede;
    font-size: 14px;
    }
    .nav_left_items.active{
    background: #f5f5f5;
    color: #ec6d69;
    border-bottom: none;
    }

    .nav_right_items{
    /*浮动向左*/
    float: left;
    /*每个item设置宽度是33.33%*/
    width: 50%;
    height: auto;
    text-align: center;
    }
    .nav_right_items image{
    width: 90%;
    height: 120px;
    margin-top: 8px;
    }
    .nav_right_items text{
    /*给text设成块级元素*/
    display: block;
    margin-top: 15px;
    font-size: 14px;
    color: black;
    /*设置文字溢出部分为...*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    展开全文
  • 微信小程序实现tab页面切换功能

    千次阅读 2018-07-12 15:08:45
    scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}"> ...

    图片.png

     

    wxml

    <scroll-view scroll-x="true" class="ip_tab_comtainer">
      <view class="ip_tab_comtainer_padd"></view>
      <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">
        <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">
          {{ip.title}}
        </view>
      </block>
      <view class="ip_tab_comtainer_padd"></view>
    </scroll-view>
    <view class='content'>
    {{content}}
    </view>
    
    

    wxss

    .ip_tab_comtainer {
        width: 100%;
        background-color: #F5F5F5;
        padding: 20rpx 0 0;
        white-space: nowrap;
    }
    
    .ip_tab_comtainer_padd {
        display: inline-block;
        width: 24rpx;
    }
    
    .ip_tab_item_s {
        display: inline-block;
        line-height: 40rpx;
        padding: 12rpx 32rpx;
        color: #91daf9;
        margin-right: 8rpx;
        margin-left: 8rpx;
        font-size: 28rpx;
       
        overflow: hidden;
      
        background-color: #ffffff;
       
        border: 1px solid #91daf9;
    }
    
    .ip_tab_item_n {
        display: inline-block;
        padding: 12rpx 32rpx;
        line-height: 40rpx;
        color: #353535;
        margin-right: 8rpx;
        background-color: #ffffff;
        margin-left: 8rpx;
        font-size: 28rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 4rpx;
        border: 1px solid #CCCCCC;
    }
    
    /**
    去除横向滚动条
    */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }
    
    .content{
      width: 100%;
    }
    

    js

    // pages/horizontal-scroll_tab/horizontal-scroll_tab.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        ips: [
          { id: "1", title: "日统计", isSelect:true },
          { id: "2", title: "月统计", isSelect: false},
          { id: "3", title: "年统计", isSelect: false},
         
        ],
        content:"全部"
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
        * item点击事件
        */
      onIpItemClick: function (event) {
        console.log(event);
        var id = event.currentTarget.dataset.item.id;
        var curIndex = 0;
        for (var i = 0; i < this.data.ips.length; i++) {
          if (id == this.data.ips[i].id) {
            this.data.ips[i].isSelect = true;
            curIndex = i;
          } else {
            this.data.ips[i].isSelect = false;
          }
        }
    
        this.setData({
          content: this.data.ips[curIndex].title,
          ips: this.data.ips,
        });
      },
    
    })
    

     

    • 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

    展开全文
  • 小程序tab切换

    千次阅读 2019-08-03 00:30:44
    data中放的数据在页面初次渲染的时候使用, 不能直接通过this.data.xxx修改值后动态地渲染到页面,下面这样写虽然能改变currentTab的值,但是不会重新渲染到页面上!!!而且用setData()里面的变量可以先不在data中...

    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,点击切换页面,代码如下: wxml: <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab"><text>最热</...
  • 微信小程序Tab切换

    万次阅读 2017-07-17 16:26:26
    做过android的都知道在android里面实现Tab切换非常简单,...在上一篇文章中我提到的小程序练手项目就实现了Tab切换效果,具体效果图可以参考文章微信小程序入门项目。实现思路翻看小程序的文档可以发现,微信为我们提供
  • tab-bar常用作微信小程序切换页面。常见首页页面下面有“首页”,“详情”,“我的”三个按钮。我们点击按钮实现跳转到按钮相对应的页面。其中我们利用tab-bar中的wx.switchTab来实现无刷新跳转。这种方法跳转的...
  • -- 页面内容 --> <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切换,滑动切换

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

    千次阅读 2018-10-11 17:50:03
    在wxml页面的代码是这样的 上面的tab选项 笔记 关于我 收藏 活动 选项对应的内容 只是举例 所有笔记 更多 在js页面的代码 data:{ tabArr: { currentId: 1, currentBdid: 1 }, } ...
  • 小程序TAB切换

    2018-11-06 10:27:49
    小程序的TABpage页面wxssjs page页面 &amp;lt;view&amp;gt; &amp;lt;view class='nav'&amp;gt; &amp;lt;view class='navOne' data-current=&quot;0&quot; bindtap=&quot;...
  • 微信小程序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-08-20 12:03:49
    -- tab框 --&amp;gt; &amp;lt;view class=&quot;nav_title&quot;&amp;gt; &amp;lt;view class=&quot;nav_tab&quot;&amp;gt; &amp;lt;!-- 如果选中的下表等于当前的索引,...
  • 出现的问题就是例如在女装时点击了销量最多,然后...导致切换女装/男装时初始界面(数据)不对。 主要场景是:点击女装,再点击男装,再点击女装。 后面我在onload里存储了女装和男装的初始数据,并且后面的操作数据都
  • 今天在小程序开发时遇到了一个小问题,首先在两个tab页面中都有用到Echarts图表,在页面加载完成时,两个页面的图表也完成绘制。于是就出现了如图问题: 页面完成加载,显示正常 tab切换,该页面的图表缩成了一坨 ...
  • 小程序切换tab页面不执行onLoad解决

    万次阅读 2019-04-04 14:33:39
    用户一开始进入到小程序的首页,在首页列表中通过navigateTo跳转新页面进行一些操作,然后通过switchTab返回首页。发现跳转首页后数据并没有发生变化,在调试里面可以看到通过switchTab跳转到首页之后,页面并没有...
  • 微信小程序 tab切换

    千次阅读 2018-01-17 09:30:27
    设置背景颜色就直接在page里设置 page {...tab切换: navigator 页面链接 传参的格式为url="路径?title={{item.title}}" 多个用&&连接 下个页面接收参数: wxml: view class="container
  • 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现简介解决过程 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 ...
  • 小程序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页面切换,但是只在第三个tab页有用到Echarts图表: 当切换至第三页时就出现了下面的情况,图表缩成一团: 解决方法就是在图表外层的view上面加上条件,代码如下: <...
  • 小程序顶部tab切换,分享朋友遮罩

    千次阅读 2018-07-30 09:03:12
    /* 页面背景 */ page{ /* overflow-y: hidden; */ background-color: #fff;.../**顶部tab切换样式 */ .navbar{ position:fixed; top: 0; width: 100%; height: 80rpx; line-height: 80rpx; z-inde...
  • 微信小程序Tab切换下面的图表显示

    千次阅读 2018-09-16 17:03:37
    就是在做Tab切换的时候,我发现页面不管是上下还是左右滑动的时候图表会悬浮在上面,不会随着页面进行移动。 结果发现swiper和scroll-view标签下面不能用canvas,这才明白。然后就改用了普通的标签。 这里用的show...
  • 小程序tab切换后,不会执行onload操作,那么我们在某tab列表进入详情后,再次返回列表,需要重新刷新页面,该如何处理? 代码如下: 在调用wx.switchTab后,通过success操作,调用getCurrentPages().pop()...
  • 微信小程序顶部tab切换以及滑动

    千次阅读 2019-04-23 14:41:22
    效果图图片如下 实现代码xml中 <view class="swiper_tab_...scroll-view scroll-x='true' scroll-left="{{scrollleft}}" class='tab-h'> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ...
  • 小程序如何实现tab切换,一部到位

    万次阅读 2018-09-26 10:13:50
    小程序实现tab切换很简单,只需要完成两部分。 1.编写页面 2.编写js触发事件 先上效果图: 接下来介绍页面代码: 控制切换Tab &lt;view class="swiper-tab"&gt; &lt;view class="sw....
  • } js文件代码: // pages/index/index.js Page({ data: { height: "", munStyle: ['bor', '', ''] }, /** * 点击头部tab选项卡 */ clickMun: function (e) { var mun = e.currentTarget.dataset.num; var ...

空空如也

空空如也

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

小程序tab页面切换