微信小程序实现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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js实现的map方法示例代码
Jan 13 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
js调用刷新界面的几种方式
May 03 Javascript
Vue计算属性的使用
Aug 04 Javascript
js实现坦克大战游戏
Feb 24 Javascript
react组件基本用法示例小结
Apr 27 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php中strtotime函数性能分析
2016/11/20 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
深入浅出es6模板字符串
2017/08/26 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
python如何让类支持比较运算
2018/03/20 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
pytorch 共享参数的示例
2019/08/17 Python
python随机数分布random均匀分布实例
2019/11/27 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
小学模范班主任事迹材料
2014/05/13 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python