uniapp 纵向滚动公告
2022-06-23 本文已影响0人
jing_bao
以纵向滚动公告为例,默认显示两条数据
template
<template>
<view class="notice_bg">
<image class="icon" :src="noticeImg"></image>
<view class="line"></view>
<swiper autoplay="true" display-multiple-items="2" vertical="true" circular interval="2000" class="bar-swiper">
<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item">
<view class="circle"></view>
<view class="item_box" @tap="click(item.id)">
{{ item.articleTitle }}
</view>
</swiper-item>
</swiper>
</view>
</template>
script
<script>
export default{
data(){
return {
noticeImg:'',//左侧图片
list:[
{
articleTitle: "文章标题001",
id: "36"
},
{
articleTitle: "文章标题002",
id: "37"
},
{
articleTitle: "文章标题003",
id: "38"
},
{
articleTitle: "文章标题004",
id: "39"
},
]
}
},
methods:{
// 点击通告栏
click(id) {
console.log(id,'======>id')
}
}
}
</script>
css
<style scoped lang="scss">
.notice_bg{
margin: 32rpx;
background-color: #FFFFFF;
border-radius: 8rpx;
padding: 16rpx 20rpx;
display: flex;
align-items: center;
.icon{
width: 74rpx;
height: 72rpx;
}
.line{
margin: 0 16rpx 0 20rpx;
background-color: #F4F4F4;
width: 2rpx;
height: 68rpx;
}
.bar-swiper{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(34, 34, 34, 0.5);
height: 80rpx;
display: flex;
align-items: center;
flex: 1;
margin-left: 12rpx;
}
.swiper-item {
display: flex;
align-items: center;
overflow: hidden;
}
.circle{
min-width: 10rpx;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: rgba(34, 34, 34, 0.5);
margin-right: 10rpx;
}
.item_box{
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 1; /** 显示的行数 **/
}
}
</style>