微信小程序实现滚动Tab选项卡_javascript技巧

来源:脚本之家  责任编辑:小易  

是指页面隐藏和显示吗? 布局页面用wx:if判断,js动态修改值就好www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了微信小程序实现滚动Tab选项卡的具体代码,供大家参考,具体内容如下

微信小程序中scroll-into-view跳转到指定位置是这样使用的: 1、首先第一步,打开微信开发者工具。 2、其次第二步,打开wxml文件,然后在文件里先新建一个scroll-view的标签即可。 3、再次第三步,设置这个scroll-into-view滚动的方向设置为x轴

最终效果如上。问题:

微信小程序自定义组件:带未读数目的tab按钮 组件的使用 可以直接复制dist中的文件,到你的项目的pages页。如果放到其他的目录,需要相应修改下列引用中的路径( ./path/to/file/tabbar.subfix ) index.wxml (页面的 wxml文件中)[mw_shl_code=app

1、tab标题总共8个,所以一屏无法全部显示。

confirm-type属性是定义键盘右下角按钮文本的,不是切换下一个文本框的

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="/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%;}

组件抄说明:picker:滚动选择器袭,现支持三种2113选择器,通过mode属性来区5261分,分别是普通4102选择器(mode = selector),时间选1653择器(mode = time),日期选择器(mode = date),默认是普通选择器,样式:32313133353236313431303231363533e78988e69d8331333365643638.sliderHView{display: flex;flex-direction: row;margin: 0 40rpx 0 40rpx;width: 70%;}.valueSty{font-size: 30rpx;text-align: center;color:#00BDBF;margin-top: 15rpx;}布局:<尺洞困view class='sliderHView' ><text class='valueSty'>{{leftValue}}%</text><slider style='width:{{leftPer}};margin-right:0rpx;' bindchange="leftSchange" min='{{leftMin}}' max='{{leftMax}}' value='{{leftValue}}' activeColor='#00BDBF' backgroundColor='陵念#000' block-size='18'/><slider style='width:100%;margin-left:0rpx;' bindchange="rightSchange" min='{{rightMin}}' max='{{rightMax}}' value='{{rightValue}}' activeColor='#000' backgroundColor='#00BDBF' block-size='18'/><text class='valueSty'颤帆>{{rightValue}}%</text></view>jS:data: {leftMin:0,leftMax:40,rightMin:41,rightMax:100,leftValue:12,rightValue:48,leftPer:'40%'},leftSchange:function(e){var that = thisthat.setData({leftValue: e.detail.value})},rightSchange: function (e) {var that = thisthat.setData({rightValue: e.detail.value})},内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 基于javascript 性能优化技巧心得(分享)
  • bootstrap 表单验证formvalidation 实现表单动态验证功能
  • javascript类型检测之typeof 和 instanceof 的缺陷与优化
  • ie图片缓存document.execcommand("backgroundimagecache&qu
  • javascript数组复制详解
  • js字符串拼接在ie中都报错的解决方法
  • javascript中import用法总结
  • javascript地址引用代码实例解析
  • js location几个方法小姐
  • javascript 利用cookie记录用户登录信息
  • 微信小程序滑动选择器怎么实现
  • 微信小程序table展开功能是原生js是怎么实现的
  • 微信小程序怎样实现页面向上滑,动态加载数据的功能
  • 微信小程序swiper选项卡每个内容都小于一屏,怎么...
  • 微信小程序如何使用scroll-into-view中跳转到指定位置
  • 小程序tabBar 小红点 原生怎么实现
  • 微信小程序多个input文本框如何实现输入完一个点击...
  • 怎么制作微信小程序滑动下拉菜单
  • 微信小程序今日关注左右滑动栏怎么做
  • 微信小程序 列表滑动
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascript微信小程序开发之实现选项卡(窗口顶部tabbar)页面切换微信小程序实现选项卡功能微信小程序 选项卡的简单实例微信小程序的tab选项卡的实现效果微信小程序开发之选项卡(窗口底部tabbar)页面切换微信小程序 tabs选项卡效果的实现微信小程序 实现tabs选项卡效果实例代码微信小程序实现顶部选项卡(swiper)微信小程序实战之顶部导航栏(选项卡)(1)微信小程序实现导航栏选项卡效果基于javascript 性能优化技巧心得(分享)bootstrap 表单验证formvalidation 实现表单动态验证功能javascript类型检测之typeof 和 instanceof 的缺陷与优化ie图片缓存document.execcommand("backgroundimagecache&qujavascript数组复制详解js字符串拼接在ie中都报错的解决方法javascript中import用法总结javascript地址引用代码实例解析js location几个方法小姐javascript 利用cookie记录用户登录信息js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式谈谈javascript中的函数图片onload事件触发问题解决方法javascript canvas编写炫彩的网页时钟js实现简单选项卡与自动切换效果的方法js实现div内部的文字或图片自动循环滚动代iframe的onload在chrome/opera中执行两次javascript中的e-mail 地址格式验证js实现屏幕自适应局部代码分享按钮接受回车事件的三种实现方法详解react组件通讯方式(多种)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved