微信小程序顶部导航栏滑动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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
微信小程序之购物车功能
Sep 23 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
vue实现列表垂直无缝滚动
Apr 08 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读取xml实例代码
2010/01/28 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
pybind11在Windows下的使用教程
2019/07/04 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
大学旷课检讨书
2014/01/28 职场文书
保洁员岗位职责
2015/02/04 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle