一聚教程网:一个值得你收藏的教程网站

最新下载

秒速赛车全天.免费计划:微信小程序实现tab页面切换功能

时间:2018-07-14 14:44:49 编辑:猪哥 来源:转载

效果图如下所示:

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

wxml


 
 
  
   {{ip.title}}
  
 
 


{{content}}

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

文章评论

热门栏目

  • 荆门全面实现社会保障卡即时制卡 2019-05-20
  • 【春到渭南】随手拍渭南各地区春景,一贴看尽渭南春色! 2019-05-20
  • 汪峰章子怡带女儿醒醒看马戏表演 满脸幸福 2019-05-19
  • 爱护民生:什么基金都不能买,即使获利,也不会给分多少红利,只是意思意思。 2019-05-19
  • 北京市北京盈之宝4S店【在线咨询】 2019-05-18
  • 美媒:研究发现高血压会增加痴呆风险 2019-05-18
  • 房价还会跌吗?这几条黄金线索告诉你背后的事实 ——凤凰网房产西安 2019-05-17
  • 搞市场经济,也不意味这政府就能偷懒,不是什么都甩给市场,美其名曰"市场会自我调节" 2019-05-17
  • 经常吃它到老耳聪目明牙齿好 让你越来越健康-美食资讯 2019-05-16
  • 端午小长假杭州接待游客454.8万人次 9成民宿预订一空 2019-05-16
  • 十九大党章修正案的新时代意蕴 2019-05-15
  • 勇敢挑战“不可能”(今日谈) 2019-05-14
  • 第十三届“三晋之春”合唱比赛在阳泉开幕 2019-05-14
  • 驴友在北京凤凰岭失联 百人搜救七天仍未找到踪迹 2019-05-13
  • 光明网招聘时事新闻分析编辑 2019-05-12
  • 512| 308| 212| 976| 304| 983| 727| 598| 734| 146|