1.讲解

效果图:

绑定数据:

白色圆点选中的颜色是白色, 选不中的是空的颜色:

以上就完成了自定义轮播图

2.封装

以下是对轮播图进行封装:

将标题和小圆点部分封装为一个组件:

3.完整代码

	{{banner[current].title||''}}

// 轮播图.my-swiper {position: relative;width: 100%;height: 512rpx;// 轮播图片swiper {height: 100%;.swiper-item,image {width: 100%;height: 100%;}}// 轮播阴影.swiper-shadow {position: absolute;bottom: 0px;left: 0rpx;right: 0;display: flex;align-content: center;height: 80rpx;width: 100%;background-color: rgba(34, 34, 34, 0.56);.swiper-text {width: 75%;height: 80rpx;line-height: 80rpx;margin-left: 32rpx;color: #FFFFFF;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;/* 限制在一个块元素显示的文本的行数 */-webkit-box-orient: vertical;/* 垂直排列 */word-break: break-all;/* 内容自动换行 */}// 轮播图小圆点.swiper-dot {width: 20%;height: 80rpx;margin-left: 60rpx;.item-dot {margin-top: 35rpx;float: left;margin-left: 12rpx;width: 16rpx;height: 16rpx;border-radius: 50%;}.colorone {background: #FFFFFF;}.colortow {background: #ACACAC;}}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！