111
111
111
111
222
111
111
333
ul,li { list-style:none; flex:1; text-align:center; cursor:pointer; padding:5px 0; } ul { display:flex; margin:0; padding:0; } .div { width:100%; overflow:hidden; background-color:#80b600; } .active { background-color:#80b600; color:#ffffff; } #tabClick { background-color:#f5f5f5; color:#80b600; } #content>div { display:none; height:200px; } #tabClick1 { background-color:#f5f5f5; color:#80b600; } #content1>div { display:none; height:200px; } #tabClick2 { background-color:#f5f5f5; color:#80b600; } #content2>div { display:none; height:200px; } #tabClick3 { background-color:#f5f5f5; color:#80b600; } #content3>div { display:none; height:200px; } /* ------------ */ .box { display:flex; justify-content:center; } h2 { text-align:center; }
更新时间:2021-04-20 00:47:28
/** * @overview * 选项卡功能包括 * 1.tabbar切换 * 2.默认展示具体第几项 * 3.上拉底部加载更多事件回调触发 * 4.切换选项卡过渡动画设置 * 设置参数 * @param title :[string,string]/[{name:'value'}] 设置tab切换按钮标题 * content :string 切换内容父级容器id节点名称 * defaultindex :number 默认选中第几项 * titleevent :eventhandle 点击选项卡事件回调 * transition :boolean 是否开启切换过度动画,默认0.3s * handlescroll :eventhandle 当前容器上拉滚动条到底部监听 * transitiontime :number 设置过渡动画时间 *automatic:{//设置自动切换 open:true,//打开自动切换,默认时间 time:1000//自定义时间 } */