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


Posted in Javascript onJuly 13, 2018

效果图如下所示:

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

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

总结

以上所述是小编给大家介绍的微信小程序实现tab页面切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
解析Vue.js中的组件
Feb 02 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 #Javascript
vue项目base64字符串转图片的实现代码
Jul 13 #Javascript
angular 组件通信的几种实现方式
Jul 13 #Javascript
JavaScript实现异步图像上传功能
Jul 12 #Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 #Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 #Javascript
详解node.js的http模块实例演示
Jul 12 #Javascript
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
python实现BackPropagation算法
2017/12/14 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
后勤工作职责
2013/12/22 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2014年店长工作总结
2014/11/17 职场文书
社会实践活动总结格式
2015/05/11 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript