15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页

uniapp中使用原生轮播图组件中提示点的扩展使用

李家霖| 发布于 2021-07-16 21:54:53| 357阅读| 0点赞| 0评论
举报

使用原生的轮播图组件的方法进行扩展 可以做出不同样式的轮播图

uniapp提供了原生的轮播图组件  但是这个原生的轮播图有许多的局限性  比如提示点  只能控制显示  颜色    可更改样式选择少    




在swiper中有一个事件  可以通过这个事件来进行更多的控制样式  @change  事件   每轮播一个项目就会触发一次事件   这个事件的事件对象中 有一个event.detail 属性  对应一个对象  这个对象中就有当前显示的轮播项目的索引

        <view class="page-section-spacing product-1">
			<swiper class="swiper" :indicator-dots="false" :autoplay="autoplay" :interval="interval" :duration="duration" @change="setIndex">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
			<view class="index">{{this.index}} / 3</view>
		</view><br/>        setIndex(e){
				this.index = e.detail.current + 1;
			},<br/>


以上的代码最外边有一个大的容器  其中嵌套这个一个swiper组件和一个view标签     swiper组件中的提示点是关闭的       view通过定位会在外部容器的右下角显示    sweiper每一次轮播都会触发@change事件    这个事件会改变view容器中的内容   给view标签设置一些style样式后  效果图就类似于这样  



自定义导航点的核心就是通过@change事件获取到当前轮播显示的索引  然后根据索引去设置自定义提示点


0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部