微信小程序滚动Tab实现左右可滑动切换


Posted in Javascript onAugust 17, 2017

 微信小程序滚动Tab实现左右可滑动切换

效果:

微信小程序滚动Tab实现左右可滑动切换

最终效果如上。问题:

1、tab标题总共8个,所以一屏无法全部显示。
2、tab内容区左右滑动切换时,tab标题随即做标记(active)。
3、当active的标题不在当前屏显示时,要使其能显示到当前屏中。

一、wxml结构

tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动。

tab内容可左右滑动切换,使用swiper组件实现

为了偷懒,所以数据都通过wx:for遍历重复出来。

说明:

1、设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页

<view >
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">健康</view>
    <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感</view>
    <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">职场</view>
    <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育儿</view>
    <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">纠纷</view>
    <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青葱</view>
    <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部</view>
    <view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他</view>
  </scroll-view>
  <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
   style="height:{{winHeight}}rpx">
    <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
      <scroll-view scroll-y="true" class="scoll-h" >
        <block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">
          <view class="item-ans">
            <view class="avatar">
              <image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
            </view>
            <view class="expertInfo">
              <view class="name">欢颜</view>
              <view class="tag">知名情感博主</view>
              <view class="answerHistory">134个回答,2234人听过 </view>
            </view>
            <navigator url="/pages/askExpert/expertDetail" class="askBtn">问TA</navigator> 
          </view>
        </block>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

二、js部分

微信小程序在开发起来,个人感觉挺像vue的,以数据驱动视图的更新。所以在小程序中,不能直接操作dom,当然也不能使用jquery之类的库。

var app = getApp();
Page({
  data:{
    winHeight:"",//窗口高度
    currentTab:0, //预设当前项的值
    scrollLeft:0, //tab标题的滚动条位置
    expertList:[{ //假数据
      img:"avatar.png",
      name:"欢?",
      tag:"知名情感博主",
      answer:134,
      listen:2234
    }]
  },
  // 滚动切换标签样式
  switchTab:function(e){
    this.setData({
      currentTab:e.detail.current
    });
    this.checkCor();
  },
  // 点击标题切换当前页时改变样式
  swichNav:function(e){
    var cur=e.target.dataset.current;
    if(this.data.currentTaB==cur){return false;}
    else{
      this.setData({
        currentTab:cur
      })
    }
  },
  //判断当前滚动超过一屏时,设置tab标题滚动条。
  checkCor:function(){
   if (this.data.currentTab>4){
    this.setData({
     scrollLeft:300
    })
   }else{
    this.setData({
     scrollLeft:0
    })
   }
  },
  onLoad: function() { 
    var that = this; 
    // 高度自适应
    wx.getSystemInfo( { 
      success: function( res ) { 
        var clientHeight=res.windowHeight,
          clientWidth=res.windowWidth,
          rpxR=750/clientWidth;
       var calc=clientHeight*rpxR-180;
        console.log(calc)
        that.setData( { 
          winHeight: calc 
        }); 
      } 
    });
  }, 
  footerTap:app.footerTap
})

三、wxss样式

.tab-h{
  height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}

 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 #Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
vue中appear的用法
Aug 17 #Javascript
Angularjs单选框相关的示例代码
Aug 17 #Javascript
js实现简易聊天对话框
Aug 17 #Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
使用python远程操作linux过程解析
2019/12/04 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
初任培训自我鉴定
2013/10/07 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB