微信小程序自定义swiper组件

最新推荐文章于 2024-08-21 17:47:57 发布

zev_chung

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量828

点赞数 1

本文链接：https://blog.csdn.net/zhi0170/article/details/106742663

版权

本文介绍了如何在微信小程序中自定义swiper组件的指示点，包括删除默认指示点，添加并修改自定义指示点的样式，以及实现相关的js逻辑处理。

摘要由CSDN通过智能技术生成

自定义指示点

swiper组件一般结构为

<swiper indicator-dots="{
  {indicatorDots}}" autoplay="{
  {autoplay}}"
		 interval="{
  {interval}}" duration="{
  {duration}}">
	<block wx:for="{
  {background}}" wx:key="*this">
	    <swiper-item>
			<view class="swiper-item {
  {item}}"></view>
	    </swiper-item>
	</block>
</swiper>

第一步：删除indicator-dots原有指示点，添加自定义指示点

<view class="container">
  <swiper class="swipers" autoplay="{
  {autoplay}}" current="{
  {currentSwiper}}" bindchange="swiperChange">  
        <block wx:for="{
  {imgUrls}}" wx:key='key'>  
            <swi