uni-app自定义全屏切换组件

目录结构

顶部导航实现 `<top-tab></top-tab>`

<template><view class="tab"><!-- scrollToView: 控制滚动的距离 通过id绑定  --><scroll-view class="tab-scroll" scroll-x :scroll-into-view="scrollToView" scroll-with-animation><view class="tab-scroll_box"><view class="tab-scroll_item" v-for="(item,index) in list " :key="index"@click="clickTab(item,index)":id="'tabIndex'+index"><view class="tab-text" :class="{active: activeIndex === index}"> {{item.name}}</view></view></view></scroll-view><view class="setting-icon"><u-icon name="setting"></u-icon></view></view>
</template><script>export default {props: {list: {type: Array,default () {return [];}},tabIndex:{type: Number,default () {return 0;}}},// 可以监听 props 或者data 值的变化watch:{tabIndex(newValue, oldValue){// console.log(newValue, oldValue); this.activeIndex = newValue;// 监听选项卡切换，控制选项卡滚动，当选项卡大于2时选项卡发生滚动if(newValue<3){this.scrollToView = 'tabIndex'+0;}else{this.scrollToView ='tabIndex'+(newValue-2);}}},data() {return {activeIndex:0,// 滚动scrollToView:'',};},methods:{// 监听点击tab事件，当点击tab时，将数据传送给父组件，控制底部全屏切换clickTab(item,index){this.activeIndex = index;// 将数据传送给父组件newlist，控制底部全屏切换this.$emit('tab',{data:item,index:index})}}}
</script><style lang="scss" scoped>.tab {// position: fixed;display: flex;width: 100%;border-bottom: 1rpx #F5F5F5 solid;background: #FFFFFF;box-sizing: border-box;// flex-wrap: nowrap;// z-index: 100001;.tab-scroll {flex: 8;overflow: hidden;box-sizing: border-box;.tab-scroll_box {display: flex;height: 90rpx;align-items: center;flex-wrap: nowrap;box-sizing: border-box;.tab-scroll_item {flex-shrink: 0;padding: 0 10px;color: #333333;font-size: 28rpx;.tab-text{padding-bottom: 10rpx;box-sizing: border-box;&.active{color: $uni-color-primary;font-weight: 600;border-bottom: 2rpx $uni-color-primary solid;}}}}}.setting-icon {flex: 1;display: flex;position: relative;justify-content: center;align-items: center;width: 90rpx;z-index: 1000;&::after {content: "";position: absolute;top: 12rpx;bottom: 12rpx;left: 0;width: 1rpx;background-color: #DDDDDD;}.u-icon {font-size: 36rpx;}}}
</style>

`<list></list>`组件

<template><!-- change：监听索引值的变化  current：当前索引值切换索引值  --><swiper class="home-swiper" @change="change" :current="activeIndex"><!--top-tab选项导航栏的数据  --><swiper-item class="swiper-item" v-for="(item,index) in tab" :key="index"><!-- 全屏选项卡中的数据列表 --><listItem></listItem></swiper-item></swiper></template><script>import listItem from './list-item.vue'export default {props:{// tab选项导航栏的数据tab:{type:Array,default:[]},activeIndex:{type:Number,default (){return 0 ;}}},data() {return {}},components:{listItem},methods:{change(e){const {current} = e.detail;// console.log(e)this.$emit('change',current)}}}
</script><style lang="scss">.home-swiper{height: 100%;.swiper-item{height: 100%;overflow: hidden;.list-scroll{height: 100%;}}}
</style>

全屏选项卡的内容滚动区域`<list-scroll></list-scroll>`

<template><view class="main"><scroll-view scroll-y class="list-scroll"><view><!-- 插入全屏切换内容 --><slot></slot></view></scroll-view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">
.main{flex: 1;overflow: hidden;box-sizing: border-box;height: 100%;.list-scroll{height: 100%;display: flex;flex-direction: column;}
}
</style>

每个选项卡中的数据`<list-item></list-item>`

<template><list-scroll class="list-scroll"><list-card :mode="item.type" :listItem="item" v-for="(item,i) in newlist" :key="i"></list-card></list-scroll>
</template><script>export default {data() {return {newlist: [{url:["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f682ddf0-30a9-11eb-899d-733ae62bed2f.jpg"] ,title: "广西农业农村体制改革成效显著",content: "完成土地确权登记颁证任务。建立健全了承包登记制度，有效解决农村土地承包长期存在的地块面积不准、“四至”不清、空间位置不明、登记簿不健全、档案管理不规范等问题，稳定了农村土地承包关系。积极引导和鼓励农村土地经营权向优势产业和新型农业经营主体流转，优化了农业资源配置。推动县（市、区）加快建立县级农村产权流转交易中心，以市场配置要素，打造规范运行的市场交易平台。目前，全区累计颁发到户土地承包证863.35万本，颁证率98.42％，超额完成国家下达的目标任务；累计建立了97个农村产权流转交易中心，96.4％的县（市、区）已建立农村产权流转交易中心，加速了土地流转。",type: 'base'},{url:["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f5d252a0-30a9-11eb-8a36-ebb87efcf8c0.jpg","https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f5d252a0-30a9-11eb-8a36-ebb87efcf8c0.jpg"] ,title: "河南范村村: 穷范村怎样变美“范村”",content: "推进农村集体建设用地确权和宅基地使用权确权登记。2015年2月至2019年12月，北流市试点探索农村集体经营性建设用地入市改革、农村土地征收制度改革、农村宅基地制度改革，积极探索创新举措。首次明确“列举式”土地征收目录，划定征地与入市边界；首次将商住用途集体建设用地入市，破解农村土地制度改革焦点难点；新增集体经营性建设用地入市，探索集体经营性建设用地入市用于公益项目，健全完善入市制度体系",type: 'column'}, {url:["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f526a950-30a9-11eb-899d-733ae62bed2f.png"] ,title: "山西洪洞县推进农村干部学历提升",content: "通过产权制度改革，基本摸清了全区农村家底，明晰了集体资产权属和集体经济组织成员的权利，建立了成员大会或代表大会、董事会、监事会等管理制度，集体经济组织实行民主决策、民主管理，初步建立起现代企业管理的组织架构。截至2020年8月，全区共完成登记赋码的农村集体经济组织共6987个，开展“三变”改革的行政村3919个，为农村经济发展注入了新动能。",type: 'image'}, {url:["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f461aba0-30a9-11eb-8a36-ebb87efcf8c0.jpg","https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f461aba0-30a9-11eb-8a36-ebb87efcf8c0.jpg"] ,title: "江苏灌南“四到位”化解涉农信访问题",content: "抵押担保体系进一步完善。健全完善惠农担保体系，实现农担机构和农担业务的市县区全覆盖，建立和完善政策性融资担保代偿责任分担和损失风险补偿机制；扩大产权抵押贷款试点规模和试点范围，2019年“两权”抵押和林权抵押贷款余额分别是2015年的3倍和1.6倍。",type: 'column'}, {url: ["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f2d28020-30a9-11eb-97b7-0dc4655d6e68.jpg"],title: "专家携手主播　共推枝江脐橙",content: "农村保险服务覆盖面进一步拓展。不断扩大糖料蔗、稻谷、能繁母猪、育肥猪、奶牛、森林等优势特色农产品政策性保险的覆盖面，目前已覆盖全区特色农产品40余种。其中，糖料蔗价格指数保险试点属国内大宗农产品首创，并成为西部第一个全面实施农村住房政策性保险的省区。",type: 'image'}, {url: ["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f682ddf0-30a9-11eb-899d-733ae62bed2f.jpg"],title: " 内蒙计划实施保护性耕作近3000万亩",content: "村级服务体系优化整合。积极开展农村金融服务进村专项活动示范点创建工作，整合利用村级行政资源，将“三农金融服务室”和助农取款点、农村电商、物流优化整合，打造“农金村办”升级版。“三农金融服务室”行政村覆盖率从11.92％提高到90％以上。",type: 'base'}, {url: ["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f526a950-30a9-11eb-899d-733ae62bed2f.png"],title: "山西洪洞县推进农村干部学历提升",content: `随后，驻村工作队开始以“每年干一件大实事”的步调开展扶贫工作。2017年协调市交通运输部门在该村设置6路公交车站点；2018年利用市专项扶贫资金安装120盏仿古路灯；2019年改造提升古河道并美化塑造河道两侧为河景公园；2020年以美丽乡村建设为契机，修建耕读广场，还增加许多设施，让广场更加实用美观。`,type: 'base'},{url: ["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f2d28020-30a9-11eb-97b7-0dc4655d6e68.jpg"],title: "专家携手主播　共推枝江脐橙",content: "农村保险服务覆盖面进一步拓展。不断扩大糖料蔗、稻谷、能繁母猪、育肥猪、奶牛、森林等优势特色农产品政策性保险的覆盖面，目前已覆盖全区特色农产品40余种。其中，糖料蔗价格指数保险试点属国内大宗农产品首创，并成为西部第一个全面实施农村住房政策性保险的省区。",type: 'base'}, {url:[ "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f5d252a0-30a9-11eb-8a36-ebb87efcf8c0.jpg"],title: " 内蒙计划实施保护性耕作近3000万亩",content: "村级服务体系优化整合。积极开展农村金融服务进村专项活动示范点创建工作，整合利用村级行政资源，将“三农金融服务室”和助农取款点、农村电商、物流优化整合，打造“农金村办”升级版。“三农金融服务室”行政村覆盖率从11.92％提高到90％以上。",type: 'image'}, {url:[ "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-yxlag3ml5glj923196/f526a950-30a9-11eb-899d-733ae62bed2f.png"],title: "山西洪洞县推进农村干部学历提升",content: `随后，驻村工作队开始以“每年干一件大实事”的步调开展扶贫工作。2017年协调市交通运输部门在该村设置6路公交车站点；2018年利用市专项扶贫资金安装120盏仿古路灯；2019年改造提升古河道并美化塑造河道两侧为河景公园；2020年以美丽乡村建设为契机，修建耕读广场，还增加许多设施，让广场更加实用美观。`,type: 'base'},]};}}
</script><style lang="scss">.list-scroll{height: 100%;}
</style>

组件`<list-card></list-card>`

<template><view><!-- 基础卡片 --><view class="listcard" v-if="mode === 'base'"><view class="listcard-image"><view class="listcard-image_box"><image :src="listItem.url[0]" mode="aspectFill"></image></view></view><view class="listcard-content" @tap="navPageToContent"><view class="listcard-content_title"><text>{{listItem.title}}</text></view><view class="listcard-content_main"><text>{{listItem.content}}</text></view><view class="listcard-content_des"><view class="listcard-content_des-label"><view class="listcard-content_des-label-item">补贴</view></view><view class="listcard-content_des-browse">{{120}} 浏览</view></view></view></view><!-- 多图卡片 --><view class="listcard mode-column" v-else-if="mode=== 'column'"><view class="listcard-content"><view class="listcard-content_title"><text>{{listItem.title}}</text></view><view class="listcard-image" ><view class="listcard-image_item" v-for="(item,index ) in listItem.url" :key="index"><image  :src="item" mode="aspectFill"></image></view></view><view class="listcard-content_des"><view class="listcard-content_des-label"><view class="listcard-content_des-label-item">科技</view></view><view class="listcard-content_des-browse">120浏览</view></view></view></view><!-- 大图模式 --><view class="listcard mode-image" v-else-if="mode === 'image'"><view class="listcard-image" ><image  :src="listItem.url[0]" mode="aspectFill"></image></view><view class="listcard-content"><view class="listcard-content_title"><text>{{listItem.title}}</text></view><view class="listcard-content_des"><view class="listcard-content_des-label"><view class="listcard-content_des-label-item">补贴</view></view><view class="listcard-content_des-browse">120浏览</view></view></view></view></view>
</template><script>export default {props: {listItem: {type: Object,default () {return {};}},mode:{type:String,default:'base'}},data() {return {};},methods:{navPageToContent(){uni.navigateTo({url:'../text/text'})}}}
</script><style lang="scss" scoped>// 卡片盒子.listcard{display: flex;padding: 10rpx;margin: 10px;border-radius:5px;box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);box-sizing: border-box;background: #FFFFFF;.listcard-image{display: flex;margin: auto 0;flex-shrink: 0;width: 80px;height: 80px;border-radius: 5px;overflow: hidden;.listcard-image_box{height: 100%;width: 100%;image{height: 100%;width: 100%;}}}// 卡片内容区.listcard-content{display: flex;flex-direction: column;padding-left: 20rpx;width: 100%;justify-content: space-between;// 标题.listcard-content_title{font-size: 14px;color: #333333;font-weight: 700;line-height: 1.2;text{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}}.listcard-content_main{padding: 10rpx ;text{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}}.listcard-content_des{margin: 10rpx 0;display: flex;justify-content: space-between;font-size: 12px;.listcard-content_des-label{display: flex;.listcard-content_des-label-item{padding: 0 5px;margin-right: 5px;border-radius: 15px;color: $uni-color-primary;border: 1px $uni-color-primary solid;}}.listcard-content_des-browse{color: #999999;line-height: 1.5;}}}// 多图样式&.mode-column{.listcard-content{width: 100%;padding-left:0 ;}.listcard-image{display: flex;margin-top: 10px;width: 100%;height: 70px;.listcard-image_item{margin-left: 10px;width: 100%;border-radius: 5px;overflow: hidden;&:first-child{margin-left: 0;}image{width: 100%;height: 100%;}}}.listcard-content_des{margin-top: 10rpx;}}// 大图模式&.mode-image{flex-direction: column;.listcard-image{width: 100%;height: 120px;image{width: 100%;// height: 100%;}}.listcard-content{padding-left: 0;margin-top: 10px;.listcard-content_des{display: flex;align-items: center;margin-top: 10px;}}}}
</style>

使用组件`<top-tab></top-tab>` 和`<list></list>`

<template><view class="content"><!-- 自定义导航栏 --><topNavbar></topNavbar><top-tab :list="tabList" :tabIndex="tabIndex" @tab="getTabIndex"></top-tab><view class="home-list"><list :tab="tabList" :activeIndex="activeIndex" @change="change"></list></view><bottom-tabBar ></bottom-tabBar></view>
</template>

uni-app自定义全屏切换组件相关推荐

dplayer js控制自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频 ...
【videojs】videojs自定义全屏按钮 | videojs全屏移动端弊端 | 创建videojs菜单
videojs全屏弊端在移动端全屏播放9:16的视频效果不好 ,如下图 9:16的视频全屏播放合适竖屏 16:9的视频全屏播放合适横屏移动端9:16我想要的效果如下图↓,全屏播放时铺满竖屏需求 ...
video.js 视频截图、录制、自定义全屏，hls、flv、mp4视频播放
功能 video.js内嵌截图.录制功能 (图片.视频会下载到本地) 自定义全屏播放hls.flv.mp4 功能集合成Vue组件参考 video.js components RecordRTC ...
PPAPI插件的全屏切换处理
有时你会想让PPAPI插件全屏(比如播放视频时),这次来看看怎么做. PPAPI和CEF App两侧都要处理. foruok原创,转载请注明出处.欢迎关注foruok的订阅号"程序视界&qu ...
简黑时钟AClock 2.3 Mac (Mac自定义全屏时钟软件)
简黑时钟 Mac是一款极致省电,自定义全屏时钟辅助工具,可以满足你对一款时钟app的所有设想,可以做床头电子表,办公桌电子表.横屏超大字体,精确到秒的电子表.简黑时钟大小仅几十kb,占用内存空间完全可 ...
android全屏与非全屏切换时Toolbar的显示,仿微信漂流瓶效果
Toolbar已经代替了actionbar,特别是在4.4或更高版本上可以有沉浸式效果,要使用Toolbar还要配置相关的Noactionbar style样式,但是如果在全屏与非全屏切换时,如何使用 ...
【3D商城】鼠标滚动控制全屏切换
[3D商城]鼠标滚动控制全屏切换 ajax请求获取服务器数据设置加载loading组件产品列表和场景列表的编写监听鼠标滚动事件列表标签中显示设置隐藏属性头部标签中显示设置隐藏属性结果 aj ...
为所有弹窗增加全屏切换功能
1.现状在开发两个管理系统,现在的页面20+,其中包含不少的弹窗.在项目开发过程中没人提过弹窗要全屏的事情,且在数据量较大的位置已经增加了可全屏的入口.但老板两次说为什么不给所有的弹窗增加全屏的功能 ...
远程桌面退出全屏/不能全屏/全屏切换的技巧
远程桌面退出全屏/不能全屏/全屏切换的技巧退出全屏问:我的电脑远程登录到服务器上并且切换到了全屏状态,全屏后发现桌面顶部没有浮动工具栏了,想退出全屏状态,不知如何退出了,最后,只有重启电脑.想知道如 ...
VirtualBox全屏切换
用VirtualBox的时候,如果设置为全屏,想再切换回来,没有什么菜单,只有通过键盘的快捷键来操作,才可以恢复. 我常常忘掉,所以老是得去找,以后需要记住这几个按键的快捷键. 1.全屏与非全屏切换: ...

uni-app自定义全屏切换组件

uni-app自定义全屏切换组件

目录结构

顶部导航实现 `<top-tab></top-tab>`

`<list></list>`组件

全屏选项卡的内容滚动区域`<list-scroll></list-scroll>`

每个选项卡中的数据`<list-item></list-item>`

组件`<list-card></list-card>`

使用组件`<top-tab></top-tab>` 和`<list></list>`

uni-app自定义全屏切换组件相关推荐

最新文章

热门文章

uni-app自定义全屏切换组件

uni-app自定义全屏切换组件

目录结构

顶部导航实现 <top-tab></top-tab>

<list></list>组件

全屏选项卡的内容滚动区域<list-scroll></list-scroll>

每个选项卡中的数据<list-item></list-item>

组件<list-card></list-card>

使用组件<top-tab></top-tab> 和<list></list>

uni-app自定义全屏切换组件相关推荐

最新文章

热门文章

顶部导航实现 `<top-tab></top-tab>`

`<list></list>`组件

全屏选项卡的内容滚动区域`<list-scroll></list-scroll>`

每个选项卡中的数据`<list-item></list-item>`

组件`<list-card></list-card>`

使用组件`<top-tab></top-tab>` 和`<list></list>`