微信小程序顶部导航栏滑动tab效果


Posted in Javascript onJanuary 28, 2019

小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下

效果图:

微信小程序顶部导航栏滑动tab效果

微信小程序顶部导航栏滑动tab效果

首先是滑动的效果:

<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
</scroll-view>

小程序使用</scroll-view>,横向移动即可

WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导航栏下面的省略号加上(因为tab-nac的border-bottom只能显示到第五个分类)

<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
 <!-- tab -->
 <view class="tab">
  <view class="tab-nav" style='font-size:12px'>
  <view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;
{{index>4?'border-bottom: 1rpx dotted #ddd;':''}}">{{item.text}}</view>
  <view >
  <view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
  </view>
  </view>
 </view>
</scroll-view>

wXSS:  

.tab{
 display: flex;
 flex-direction: column;
}
.tab-nav{
 height: 80rpx;
 background: #fff;
 border-bottom: 0.5rpx dotted #ddd;
 display: flex;
 line-height: 79rpx;
 position: relative;
}
 
.tab-line{
 position: absolute;
 left: 0;
 bottom: -1rpx;
 height: 4rpx;
 background: #f7982a;
 transition: all 0.3s;
}
.tab-content{
 flex: 1;
 overflow-y: auto;
 overflow-x: hidden;
}

JS: 

import util from './../../utils/util.js';
Page({
 data: {
 showtab: 0, //顶部选项卡索引
 tabnav: {
  tabnum: 5,
  tabitem: [
  {
   "id": 0,
   "text": "商品分类1"
  },
  {
   "id": 1,
   "text": "商品分类2"
  },
  {
   "id": 2,
   "text": "商品分类3"
  },
  {
   "id": 3,
   "text": "商品分类4"
  },
  {
   "id": 4,
   "text": "商品分类5"
  },
  {
   "id": 5,
   "text": "商品分类6"
  },
  {
   "id": 6,
   "text": "商品分类7"
  }
  ]
 },
 productList: [],
 },
 onLoad: function () {
 },
 setTab: function (e) {
 const edata = e.currentTarget.dataset;
 this.setData({
  showtab: edata.tabindex,
  
 })
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
微信小程序定位当前城市的方法
Jul 19 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 #Javascript
微信小程序实现顶部导航特效
Jan 28 #Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 #Javascript
vue.js仿hover效果的实现方法示例
Jan 28 #Javascript
vue-for循环嵌套操作示例
Jan 28 #Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 #Javascript
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
You might like
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
自学python的建议和周期预算
2019/01/30 Python
Python下简易的单例模式详解
2019/04/08 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
自荐信格式
2013/12/01 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
大学校务公开实施方案
2014/03/31 职场文书
初中班主任寄语
2014/04/04 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
围城读书笔记
2015/06/26 职场文书
庆祝教师节主持词
2015/07/06 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript