微信小程序顶部导航栏滑动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移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
详解基于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基础知识:控制结构
2006/12/13 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php导入导出excel实例
2013/10/25 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
什么是serialVersionUID
2016/03/04 面试题
介绍一下Ruby的特点
2013/01/20 面试题
2014年三八妇女节活动方案
2014/02/28 职场文书
开门红主持词
2014/04/02 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
承诺书应该怎么写?
2019/09/10 职场文书