微信小程序顶部导航栏滑动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 相关文章推荐
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
浅谈js原生拖放
Nov 21 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
vue axios 二次封装的示例代码
Dec 08 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JS中Location使用详解
2015/05/12 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
对python中各个response的使用说明
2020/03/28 Python
基于FME使用Python过程图解
2020/05/13 Python
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
大学生标准自荐书
2014/06/15 职场文书
绿色校园广播稿
2014/10/13 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
python opencv通过按键采集图片源码
2021/05/20 Python