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

前端 同时被 2 个专栏收录
332 篇文章 6 订阅

图片.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干货大全。

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值