小程序轮播图 swiper当前滑块容器样式

官网截图主要是这两个参数配置可以让当前滑块露出前一项和后一项的一部分

轮播部分
<swiper style="height:260rpx" class="swiper" previous-margin='30' next-margin='30' @change="swiperChange" :circular="true" :indicator-dots="true" :autoplay="true" :interval="6000" :duration="500"><block v-for="(item, index) in swiperList" :key="index"><swiper-item><div class="swiper-item" :class="currentIndex == index ? '': 'not-active'"><div style="margin-top: 30rpx;"><p class="num">{{item.total}}</p><p class="words">{{item.type}}</p></div><div style="margin-top: 30rpx;"><p class="num">{{item.normal}}</p><p class="words">当月正常使用</p></div><div style="margin-top: 16rpx;"><p class="percent">{{item.rate}}</p><p class="progress"><span :style="'width:'+item.rate"></span></p><p class="rate">溯源平台使用率</p></div></div></swiper-item></block></swiper>

data中定义 currentIndex:‘0’

    // 轮播swiperChange(e){this.currentIndex = e.mp.detail.current}

//非当前滑块的样式
.not-active{scale: 0.9;
}

// 指示点样式
.swiper /deep/ .wx-swiper-dot{width: 10rpx;height: 10rpx;border-radius: 10rpx;border: 1px solid rgba(124, 165, 255, 1);}

效果展示

小程序轮播图 swiper当前滑块容器样式相关推荐

小程序轮播图swiper点击图片自定义跳转
我想实现的功能就是,点击首页的轮播图的不同图片,跳转到指定的页面. 点击轮播图的新用户专享图片跳转到新用户活动页面. 最开始我是想通过点击获取轮播图的下标,根据下标判断跳转到相应的页面,但是试了好久并 ...
微信小程序 # 轮播图swiper滑动到最后一页进行页面跳转
需求背景首次启动小程序时要用轮播图做展示,希望能实现滑动到最后一页自动就跳转到首页实现思路 <view class="container" id="first- ...
微信小程序轮播图 swiper图片组件
照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了 ...
微信小程序轮播图swiper详细代码介绍
微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item} ...
微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...

小程序轮播图 swiper当前滑块容器样式

小程序轮播图 swiper当前滑块容器样式相关推荐

最新文章

热门文章