这篇文章给大家分享的是“小程序怎样实现轮播图圆点组件，代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

微信小程序自带的轮播图小点，是一个圆点且在图片上展示，不美观。上图为自定义后的轮播图效果

代码如下：

wxhtml：

<!-- 轮播图 -->
    <view class="lbt">
      <swiper class="banner-list" style="height:100%;" circular="{{circular}}" indicator-dots='' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange"> 
        <block wx:for="{{imgUrls}}" wx:key='{{item.id}}'>
          <swiper-item>
            <image src="{{urls}}{{item.image}}" class="slide-image" width="100%" />
          </swiper-item>
        </block>
      </swiper>
      <!-- 这里是自定义控制组件的模块 -->
      <view class="dots">
      <block wx:for="{{imgUrls}}" wx:key="{{item.id}}">
      <!-- 循环图片张数有多少张图片就有多少个小点 -->
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
      </view>
    </view>
  </view>

wxjs：

// 轮播图片改变时，小圆点也改
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },

wxcss：

.lbt {
  position: relative;
  width: 100%;
  height: 300rpx;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}
.lbt .dots{
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
}
.lbt .dots .dot{
margin: 0 6rpx;
width: 18rpx;
height: 10rpx;
background: #A2A2A2;
border-radius: 6rpx;
transition: all .6s;
}
.lbt .dots .dot.active{
width: 30rpx;
height: 10rpx;
background:#3d3d3d;
}

.slide-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

感谢各位的阅读，以上就是“小程序怎样实现轮播图圆点组件，代码是什么”的内容了，经过本文的学习后，相信大家对小程序怎样实现轮播图圆点组件，代码是什么都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue缓存页面怎样管理？什么时候销毁及如何销毁？

  今天我们来了解的是vue缓存页面怎样管理的内容，对于vue缓存页面的管理的问题的就是什么时候销毁及如何销毁，那么具体怎样做呢？下面跟随小编一起来了解看看吧。

• React中onClick传递参数是怎样，onclick未执行如何解决

  很多朋友向小编反映一个问题关于React onClick 传递参数的问题，当点击删除按钮需要执行删除操作，针对这个问题该如何处理呢？下面小编给大家带来了React onClick 传递参数的问题，感兴趣的朋友一起看看吧

• 基于vue框架如何实现数据采集器，代码是什么

  这篇文章主要介绍了如何用vue设计一个数据采集器，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

• 用vue怎样做一个计时器的功能

  这篇文章主要为大家详细介绍了Vue计时器的用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• js怎样写验证码功能？动态验证码如何实现？

  我们在登录或者注册网页账号的时候，往往需要输入验证码，那么验证码是如何实现的呢？下面就给大家分享一下关于使用JS实现验证码的内容，包括普通的验证码和带干扰项的动态验证码，效果如下图所示，感兴趣的朋友可以看看。