• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请


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,
    });
  },

})

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap