小程序修改swiper 点点样式

最新推荐文章于 2024-07-08 09:49:43 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2024-07-08 09:49:43 发布

阅读量550

点赞数

分类专栏：小程序文章标签：小程序微信小程序 css3

本文链接：https://blog.csdn.net/weixin_42645716/article/details/125505041

版权

小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小程序默认swiper样式

在这里插入图片描述

修改后的样式

在这里插入图片描述

wxml

 <!-- 轮播图 -->
  <view class="swiper">
    <swiper autoplay="true" interval="5000" duration="500" current="{{currentSwiper}}" bindchange="swiperChange">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item class="swiper-item imgbox">
          <image src="{{item.url}}" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
    <view class="dots">
      <block wx:for="{{background}}">
        <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
      </block>
    </view>
  </view>
  <!-- 轮播图 -->

css


.swiper {
  position: relative;
}
.dots {
  width: 160rpx;
  height: 10rpx;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20rpx;
}
.dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin:0px 10rpx;
  background: white;
}
.active {
  width: 100rpx;
  height: 10rpx;
  border-radius: 10px;
  background: red;
}

js

Page({
  data: {
    background: [{'url':'../../images/img1.jpg'},{'url':'../../images/img2.jpg'},{'url':'../../images/img3.jpg'}],
    currentSwiper: 0,
  },

  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  }
  })