陕西榆林市信息网站建设公司,百度识图查图片,wordpress king主题,提升学历的重要性先来看效果#xff1a; 分析#xff1a;效果图由左中右三个部分组成#xff1a;
1.左边#xff1a;小喇叭和公告#xff0c;我们可以使用uniapp官方文档的扩展组件中的图标来实现#xff1b;
2.公告内容#xff1b;
3.右箭头#xff0c;使用uniapp官方文档的扩展组件…先来看效果 分析效果图由左中右三个部分组成
1.左边小喇叭和公告我们可以使用uniapp官方文档的扩展组件中的图标来实现
2.公告内容
3.右箭头使用uniapp官方文档的扩展组件中的图标来实现。
因此在html层面需要准备3个容器构成左中右3个部分的页面效果。扩展组件的引入在前面文章中有介绍这里不再赘述直接上代码
view classnoticeview classleftuni-icons typesound-filled size20 color#28b389/uni-iconstext classtext公告/text/viewview classcenterswiper vertical autoplay interval1500 duration300 circularswiper-item v-foritem in 4文字内容文字内容文字内容文字内容文字内容文字内容文字内容/swiper-item/swiper/viewview classrigntuni-icons typeright size16 color#333/uni-icons/view
/view
代码分析
1.上面typesound-filled实现小喇叭的效果type“right”实现右箭头的效果
2.swiper vertical autoplay interval1500 duration300 circular实现的效果有 vertical 轮播方向为 垂直滚动从上到下或从下到上默认是水平方向。 autoplay 开启 自动轮播无需手动滑动。 interval1500 自动轮播的间隔时间为 1500毫秒1.5秒。 duration300 滑动动画的时长为 300毫秒影响切换的流畅度值越小越快。 circular 开启 循环轮播滑动到最后一项时会无缝衔接回到第一项。 最后来看SCSS样式设置
.notice{width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;border-radius: 80rpx;margin: 0 auto;display: flex;.left{width: 140rpx;display: flex;justify-content: center;align-items: center;.text{color: #28b389 !important;font-weight: 600 !important;font-size: 28rpx !important;}}.center{flex: 1;swiper{height: 100%;swiper-item{height: 100%;font-size: 30rpx;color: #666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}.rignt{width: 70rpx;display: flex;justify-content: center;align-items: center;}}
SCSS代码分析:
1. 外层容器 .notice
.notice {width: 690rpx; // 宽度为 690rpx响应式单位height: 80rpx; // 固定高度 80rpxline-height: 80rpx; // 文字垂直居中单行文本background: #f9f9f9; // 浅灰色背景border-radius: 80rpx; // 圆形圆角高度的一半实现胶囊形状margin: 0 auto; // 水平居中display: flex; // 启用 Flex 布局
}
效果 一个 浅灰色胶囊形 的横向容器宽度占屏高度固定内部元素水平排列。
2. 左侧区域 .left
.left {width: 140rpx; // 固定宽度display: flex; // Flex 子布局justify-content: center; // 内容水平居中align-items: center; // 内容垂直居中.text {color: #28b389; // 文字颜色为绿色font-weight: 600; //加粗font-size: 28rpx; // 文字大小 28rpx}
} 效果 左侧是一个固定宽度的区域内部包含一个 绿色加粗文字如“公告”图标或文本。 文字强制居中显示。
3. 中间区域 .center
.center {flex: 1; // 占据剩余全部空间swiper { // 嵌套 swiper 组件height: 100%; // 高度撑满父容器swiper-item { // 轮播项height: 100%; // 高度撑满font-size: 30rpx; // 文字大小color: #666; // 灰色文字overflow: hidden; // 超出隐藏white-space: nowrap; // 禁止换行text-overflow: ellipsis; // 超出显示省略号}}
}
效果 中间区域是一个 横向滚动的轮播容器swiper用于显示公告文字。 文字单行显示超出部分自动截断并显示省略号...。 常见用途滚动公告文字如“最新活动XXX...”。
4. 右侧区域 .right
.right {width: 70rpx; // 固定宽度display: flex; // Flex 子布局justify-content: center; // 内容水平居中align-items: center; // 内容垂直居中
}
效果 右侧是一个固定宽度的区域通常放置图标如“更多”箭头或关闭按钮。 内容强制居中显示。
