博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
slide-tabs:可滑动的菜单栏
阅读量:7197 次
发布时间:2019-06-29

本文共 929 字,大约阅读时间需要 3 分钟。

类似可滑动的新闻菜单栏,支持tab栏点击自动滑动到视图区以及内容区侧滑

slide-tabs

加入项目

  • npm下载
npm i -S miniprogram-slide-tabs复制代码

使用

{  "usingComponents": {    "slide-tabs": "wx-slide-tabs"  }}复制代码
  • 手动下载组件到项目components目录 使用
{  "usingComponents": {    "slide-tabs": "/components/wx-slide-tabs/index"  }}复制代码

使用

wxml(slot为slide-tab-(下标+1))

h1
h2
h3
复制代码

js

Page({	onChange: function(e) {		console.log(e)	}})复制代码

参数

选项名 类型 是否必填 默认值 描述
tabs Array false [] tab栏标题数组['首页', '开发管理']或者[{title: '首页'}, {title: '开发关注'}]
tabheight Number false 96 单位为rpx
height Number false 整个组件高度 默认视窗高度,单位为rpx
loop Boolean false false 内容区是否衔接滑动,即从最后一栏右滑置第一栏,第一栏左滑至最后一栏
slidable Boolean false false tabs栏是否滑动,默认为false,内容平分宽度

事件

选项名 类型 是否必填 描述
bind:change Function false 监听点击/切换事件

注意事项

  如果在某些场景下,当参数slide为true,tabs出现滚动的时候,出现了滚动条,可以在引入组件的页面或特定标签中添加如下样式隐藏滚动条

::-webkit-scrollbar {	width: 0;	height: 0;	color: transparent;}复制代码

其他小程序插件

转载地址:http://pmzum.baihongyu.com/

你可能感兴趣的文章
Combine Two Tables[leetcode]
查看>>
Linux环境变量
查看>>
Python2 进程扫描脚本
查看>>
JQuery EasyUI 日期控件如何控制日期选择区间
查看>>
scrapy ImportError: No module named items
查看>>
jboss7.1.1配置jndi
查看>>
Jsoup解析html
查看>>
JSP+ajax+springMVC+MayBatis处理excel上传导入
查看>>
eclipse maven 配置遇到的问题
查看>>
JSP里request变量列表
查看>>
#python#面向对象练手+模仿Amazon的物流追踪显示
查看>>
器者,道之所载
查看>>
pch头文件出现的问题
查看>>
phpstudy本地环境开启.htaccess伪静态
查看>>
谁能告诉我mybatis中使用#和$的区别?
查看>>
GCD死锁
查看>>
JVM
查看>>
通过创建一个简单的骰子游戏来探究 Python
查看>>
linux 下 C 编程和make的方法 (五:补充 怎么抓BUG)
查看>>
C、C++中关键字static的区别
查看>>