-
2019-05-30 19:53:53
uni-app中构建tab选项卡
手机APP最常见的莫过于tab选项卡,其特点是可以无缝滚动,且不会出现滚动条。有点类似轮播,但是比轮播更灵活。
1.scroll-view
uni-app官方文档为我们提供了scroll-view。来实现横向或竖向的滚动
横向
<scroll-view scroll-x="true" class="h-tab" :scroll-left="scroll_left" scroll-with-animation="true"> ..... </scroll-view>
- scroll-x:设置超出部分才不会出现滚动条
- scroll-left:滚动时距离左边距离
- scroll-with-animation:滚动动画
.h-tab { white-space: nowrap; //不换行 width: 100%; //宽度适应屏幕 height: 80upx; line-height: 80upx; position: fixed; top: 0; left: 0; background: #fff; }
竖向
竖向有坑的地方
具体看下面,因为我是把竖向滚动放在swiper中的,这里就不重复说了2.swiper
<swiper style="flex:1;margin-top:80upx" duration="800" @change="changeSwiper" :current="swiperIndex"> <swiper-item v-for="(elem,i) of swiperData" :key="i"> <scroll-view scroll-y="true" style="height:100%" @scrolltolower="onToButtom"> ..... </scroll-view> </swiper-item> </swiper>
swiper一定要设置高度,不然会显示默认高度150upx;
我们可以使用flex布局,外部大的容器设置为100vh
,让swiper的样式flex:1
,这样就会自动撑满屏幕。
接下来一定要设置scroll-view的高度,否则内部容器,无法滚动,只铺满swiper容器的高度。
只有设置成height:100%
才会出现滚动。- duration:轮播切换过度时间
- current:当前轮播索引
- changeSwiper:切换轮播图触发的事件
这里还有点要注意,因为是竖向滑动,所以原生的下拉触底周期函数失效,需要使用scroll提供的API——
scrolltolower
3.dom元素获取
关于获取元素的一些api
3.1 获取设置的dataset
e.currentTarget.dataset.index
3.2 获取元素宽高
let view = uni.createSelectorQuery().select(".h-tab-item"); view.boundingClientRect(data => { console.log(data.width) }).exec();
更多请参考官网
4. 整合逻辑
- 通过dataset设置tab索引,通过动态绑定设置swiper索引
:current:swiperIndex
- 滑动tab,获取索引,使tab索引与swiper的索引相同
- 滑动swiper,获取索引赋值给
tabIndex
,并获取一个tab的宽高,然后动态改变scroll-left
- 修改tab的样式,根据tabIndex来显示active
//tab点击事件 changeTab(e) { this.tabIndex = e.currentTarget.dataset.index;//获取tab索引 this.swiperIndex = this.tabIndex //实时更新swiper的索引与tab索引相同 }, //滚动到底部事件,因为是设置了scroll-view所以无法使用原生的onReachBottom生命周期函数 onToButtom() { console.log('refresh'); uni.showLoading({ title: '加载中', }); setTimeout(() => { this.setData(); uni.hideLoading(); }, 1000) }, //swiper滑动事件 changeSwiper(e) { let index = e.target.current; this.tabIndex = index; let view = uni.createSelectorQuery().select(".h-tab-item"); view.boundingClientRect(data => { this.scroll_left = data.width * index //根据下标移动tab }).exec(); },
完整demo请参考
更多相关内容 -
iOS APP版本检测强制更新
2015-02-14 09:35:28可以实现强制用户更新是一个实用程序,检查用户的当前安装的版本iOS应用程序对应用商店中当前可用的版本。如果一个新版本可用,UIAlertView的实例提出了新版本的用户通知他们,并给予他们更新应用程序的选项。 -
eclipse中run as选项卡下没有springboot app这个启动项
2020-04-07 11:15:32eclipse中导入springboot项目后,在主程序类中run as选项下没有springboot app这个选项根本原因是因为eclipse缺少了springboot的插件 根本原因是因为eclipse缺少了springboot的插件 需要我们下载最新版的sts插件 ... -
uni-app切换选项卡的两种方式
2020-11-03 18:22:57切换选项卡时,内容改变,内容的样式不同。 定义索引:默认选中选项一 切换选项卡的索引方法 这是效果 方法二.切换选项卡时,内容改变,内容的样式相同。 定义导航栏选项和索引,默认第一个 切换...方法一.切换选项卡时,内容改变,内容的样式不同。
定义索引:默认选中选项一
切换选项卡的索引方法
这是效果
方法二.切换选项卡时,内容改变,内容的样式相同。
定义导航栏选项和索引,默认第一个
切换索引
这是效果
最后附上代码:
<template>
<view class="new-file">
<!-- 第一种方法 -->
<!-- 头部选项卡 -->
<view class="head-nav">
<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">选项一</view>
<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">选项二</view>
</view>
<!-- 内容切换 -->
<view class="content" v-if="navIndex==1">
我是选项一
</view>
<view class="content" v-if="navIndex==2">
我是选项二
</view>
<!-- 第二种方法 -->
<view class="head-nav">
<!-- 头部选项卡 -->
<view :class="listIndex==y?'activite':''" @click="checkListIndex(y)" v-for="(x,y) in navList" :key="y">{{x}}</view>
</view>
<!-- 内容 -->
<view class="content" v-for="(x,y) in navList" :key="y">
<view class="" v-if="listIndex==y">
<view class="box">盒子</view>
</view>
</view>
</view>
</template><script>
export default{
data(){
return{
navIndex:1,
navList:["选项卡一","选项卡二"],
listIndex:0
}
},
methods:{
checkIndex(index){
this.navIndex =index;
},
checkListIndex(index){
this.listIndex=index;
}
}
}
</script><style scoped>
.head-nav{
width: 50%;
margin:20rpx auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.activite{
font-weight: bold;
border-bottom: 6rpx solid #0065d9;
}
.head-nav>view{
padding-bottom: 10rpx;
}
.box{background: #008000;}
</style>
-
Mac 屏幕录制 权限 没有可勾选或添加的App选项 产生原因和解决办法
2021-02-22 11:05:13安全性与隐私-屏幕录制,右边竟然没有可勾选或可添加的App选项 产生原因:经过网络搜索关键字,发现是因为系统升级到10.5,MacCataLina过程中位于/Library/Application Support/com.apple.TCC目录下的TCC.db文件损坏...遇到问题:
安装软件需要获取截屏和屏幕录制的功能权限,但发现打开系统设置->安全性与隐私-屏幕录制,右边竟然没有可勾选或可添加的App选项
产生原因:
经过网络搜索关键字,发现是因为系统升级到10.5,Mac CataLina过程中位于/Library/Application Support/com.apple.TCC目录下的TCC.db文件损坏了。
期间遇到的错误提示(Error: table access has 7 columns but 12 values were supplied)解决办法:
第一步:关闭SIP功能
1.重启电脑,进入恢复模式(电脑启动时按住CMD + R,直到看到Apple徽标为止)2.转到顶部菜单,选择实用程序,然后选择终端。
3.使用以下命令关闭SIP:
csrutil disable
4.转到顶部菜单,然后选择“ Apple徽标”和“重新启动”。
第二步:修复系统的TCC.db文件
在终端中敲下如下命令sudo chmod 777 /Library/Application\ Support/com.apple.TCC sudo rm -rf /Library/Application\ Support/com.apple.TCC/TCC.db
第三步:在TCC.db文件中插入字段 或者打开对应软件后此处为OBS Studio会提示需要屏幕录制权限 选给权限即可
字段的区别就是App的BundleID 以及最后一位的数字可以打开应用显示包内容,在Info.plist中能找到如com.tencent.xinWeChat就是微信的BundleID
最后一位的数字 应该是在TCC.db中能看到的 具体查看方式可以研读下How To Edit The SIP Protected TCC.db File On macOS Sierra 10.12.2 And Later https://hcsonline.com/images/PDFs/How_To_Edit_The_SIP_Protected_TCC.db_File_On_macOS_Sierra_10.12.2_And_Later.pdf微信 sudo /usr/bin/sqlite3 /Library/Application\ Support/com.apple.TCC/TCC.db "INSERT or REPLACE INTO access VALUES('kTCCServiceScreenCapture','com.tencent.xinWeChat',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1585206453);"
QQ sudo /usr/bin/sqlite3 /Library/Application\ Support/com.apple.TCC/TCC.db "INSERT or REPLACE INTO access VALUES('kTCCServiceScreenCapture','com.tencent.qq',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1585206581);"
腾讯会议 sudo /usr/bin/sqlite3 /Library/Application\ Support/com.apple.TCC/TCC.db "INSERT or REPLACE INTO access VALUES('kTCCServiceScreenCapture','com.tencent.meeting',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1585206926);"
参考以下文章,感谢!
[1]https://discussionschinese.apple.com/thread/251243787
[2]https://blog.csdn.net/dangai0201/article/details/104248535
[3]https://blog.csdn.net/qq_40673345/article/details/104272552 -
Mac 安全与隐私没有允许任何来源的app选项解决办法
2018-06-14 17:23:57Mac升级到macOS Sierra 10.12后,发现SVN管理软件Conerstone 2.7破解版已经无法使用,需要更新版本。 安装Cornerstone_3.0.1破解版后,发现提示“cornerstone 已损坏,打不开。” 导致问题原因: 软件有经过了... -
APP设计中的选项卡式(tab)导航
2018-05-15 15:39:04在我们的产品中,导航起到了举足轻重的作用。导航相信大家都不陌生,它可以让... 选项卡式(tab)导航可以说是最常见的导航了,尤其是APP。大部分的APP都采用这种导航模式作为主导航,有时也会将tab导航和其他的... -
uni-app如何实现一个简单的选项卡
2019-09-06 10:32:461.先写一个外框,在抒写2个内容,先把选项卡固定在顶部使用display: flex;,随后写2个不同的样式去区分选中和未选择 2.三目运算分别给他们赋一个排序,点击的时候获取是第一个还是第二个,如果选中则添加inv-h-se... -
uni-app实战教程-----H5移动app以及小程序(三)---页面跳转以及底部选项
2021-01-23 18:02:00仗剑天涯,我没有摘要 -
Android Studio导入项目app module一直不显示
2019-11-20 11:54:02Android Studio导入项目app module一直不显示 问题描述及尝试解决 Android Studio版本:3.5.2 导入或打开已有Android项目时Gradle插件版本和Gradle Wrapper都正常,具体操作: 1.File --> Open… --> 选中... -
没有add as library选项,需要在工程app右键打开open module settings
2019-01-11 11:09:51 -
Mac 安全与隐私-通用下没有“任何来源”选项
2022-02-17 09:26:59系统偏好设置 -> 安全与隐私 -> 通用 -> 允许从以下位置下载的App 没有 “任何来源” 选项 终端输入如下命令 ➜ ~ sudo spctl --master-disable Password: ➜ ~ 之后输入密码就好了 -
那些年IOS AppStore更新App所遇到的坑
2018-07-03 11:35:29工作环境(蓝色粗体字为重要内容,红色粗体字为特别注意内容)1,实验环境:MacOS Heigh Sierra 10.13.5,Xcode9.4.12,参考文献:①https://www.jianshu.com/p/860fdd8860cc②https://www.jianshu.com/p/a391c1aad96b... -
手机里没有订阅的选项,我该怎样取消自动收费项目
2021-08-11 13:02:32自动续订的订阅包括:Apple Music 订阅Apple 新闻、报纸和杂志订阅内容或服务的 App 内订阅(HBO NOW、Spotify、Pandora、Hulu 等。)如果您想管理订阅,但当前没有使用订阅时所用的 Apple ID 登录,如果您使用的是... -
为什么国外的 App 很少会有开屏广告?
2017-10-26 11:24:31前言:笔者在知乎看到这个问题,觉得这的确是一个值得关注和回答的现象,遂写了回答并整理成本文发布在此抛砖引玉,欢迎讨论。正文:古话说得好,先问...那为什么会给这么多人一种国外 App 更干净的感觉呢,我们从 -
针对【create-nuxt-app新版本v3.2.0】构建项目时没有server配置以及运行后弹出收集匿名数据选项等问题的...
2020-08-16 21:32:21本文参考官方文档的具体位置: ... ... 问题一:create-nuxt-app现在已经升级到...这是本文构建时的选项(本文是以后端渲染SSR为前提解决服务端配置的,单页面应用在上面提到的nuxt命令这一章节也有提到) 1、在.. -
AppData是什么意思,Appdata文件夹可以删除吗?
2021-07-13 02:46:36AppData是什么意思,Appdata文件夹可以删除吗?喜欢研究系统的朋友们一定发现了,在Win Vista、Win7以及Win8操作系统中有一个AppData文件夹,这个文件夹在本人的电脑里面,进然后1.29G大小,那么接下来问题就出现了,... -
Android studio app没有出现,这种情况直接新建一个
2018-08-22 19:04:04直接左上角+号,直接新建一个Android app,即可。 -
AppStore应用上传审核及更新的步骤
2018-06-06 11:06:56AppStore上传及更新文档 必要条件 上传AppStore所需的账号密码 上传准备 1.bundle identifier 对应上传AppStore证书所使用的bundleID填写 2.版本号version 如3.1.0,3在版本大规模改动时进行调整,1是在... -
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
2019-04-19 15:23:48HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡) 作者:班尼科 ...【前言】 在上文中,我们为地图项目添加了标题栏中实现注册、登录、设置等,但页面底端没有常见的底部导航栏(在mui中... -
APP是什么? 为什么叫APP APP全称是什么
2016-02-24 15:55:17应用程序,Application的缩写, ...一、最常用的解决APP是什么意思的答案 传统意义上来说,APP这个简写的英文名称之所以会如此流行,主要是因为移动互联网的快速崛起。移动互联网的快速发展,让移动应用和移动硬件 -
手机app弹出提示询问获取定位权限,有三个选项,仅使用期间这个选项是什么用途呢
2020-12-01 13:48:08手机app弹出提示询问获取定位权限,有三个选项,仅使用期间允许这个选项是什么用途呢 主要用于防止app在后台获取用户的定位信息。 -
MacOS 10.12安全与隐私没有允许任何来源的app选项解决办法
2016-11-09 14:12:20隐私中默认已经去除了允许安装任何来源App的选项,没有这个选项估计好多不是从AppStore中下载的软件都不能正常安装,官方给出解决办法是安装键盘上的cantrol +点击要打开的APP文件即可。但是感觉还是不方便查询了... -
IOS APPStore上传更新应用版本
2018-12-21 17:44:03使用环境(蓝色粗体字为...最近在帮朋友在苹果的appstore更新一个app,在此记录一下更新流程。 step1.登陆https://appstoreconnect.apple.com建立新版本 填写版本信息、以及更新内容即可,可以不更新截图。 st... -
Android/IOS 实现接触NFC自动跳转到App,如果未安装App,则跳转到应用市场
2022-03-01 17:14:34某些共享电单车的友商最近推出了手机碰一碰NFC自动跳转到App自动开锁的功能,这个对于用户体验是有提升的,所以研究了一下。 友商的逻辑是这样的 如果已安装App,接触NFC自动跳转到App 如果未安装App,则跳转到应用... -
C#项目中没有App.config文件,手动添加方法
2018-08-01 10:24:05在解决方案资源管理器中,右键项目名称,在右键菜单中选择“添加”-“新建项”,在弹出的新建项窗口列表中,选择“添加应用程序配置文件”选项,即可在项目文件中添加App.config文件。 ... -
mui开发APP教程之使用选项卡跳转子页面
2017-04-28 08:17:09...--主页面底部选项卡--> <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="... -
APP测试基本流程以及APP测试要点梳理,保证您看了不后悔!
2021-09-10 19:38:13前言:相信很多刚刚步入测试行业的小伙伴对于APP测试不是很熟悉,这次我为大家提供一篇宝藏文章,希望大家喜欢,谢谢! 一、APP测试基本流程 1、流程图 2、测试周期 测试周期可按项目的开发周期来确定测试时间,... -
华为手机app内下载更新apk无反应,不弹出安装页面
2018-05-07 09:33:54自己写个应用,有个软件更新的需求,但是遇到2个问题,特此记录下,希望能帮到遇到同样问题的人;1、FileUriExposedException 这个问题,就是7.0以上不允许这种方式调用了,解决方式一艘一把。2、7.0权限的问题解决... -
5+App和uni-app在App开发上有何区别?
2020-11-12 10:32:05本文只谈仅做App的情况下,uni-app的App和5+App有什么区别。 5+App是DCloud上一代产品,基于webview扩展的混合开发技术。 它的每个页面都是一个webview加载一个html页面,调用原生扩展能力时通过webview的桥通信实现...