uni-app自定义全屏切换组件
目录结构
顶部导航实现 <top-tab></top-tab>
<template>
<view class="tab">
<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;
}
}
},
watch:{
tabIndex(newValue, oldValue){
this.activeIndex = newValue;
if(newValue<3){
this.scrollToView = 'tabIndex'+0;
}else{
this.scrollToView ='tabIndex'+(newValue-2);
}
}
},
data() {
return {
activeIndex:0,
scrollToView:'',
};
},
methods:{
clickTab(item,index){
this.activeIndex = index;
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>
<swiper class="home-swiper" @change="change" :current="activeIndex">
<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:{
type:Array,
default:[]
},
activeIndex:{
type:Number,
default (){
return 0 ;
}
}
},
data() {
return {
}
},
components:{
listItem
},
methods:{
change(e){
const {current} = e.detail;
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>
4615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
