微信小程序滚动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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
js异或加解密效果代码
Jun 25 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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中动态HTML的输出技术
2006/10/09 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python中遍历列表的方法总结
2019/06/27 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python实现简单飞行棋
2020/02/06 Python
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
五年级音乐教学反思
2014/02/06 职场文书
合作意向协议书范本
2014/03/31 职场文书
社会工作专业自荐信
2014/09/26 职场文书
小学安全工作总结2015
2015/05/18 职场文书
春晚观后感
2015/06/11 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
Redis 哨兵机制及配置实现
2022/03/25 Redis