微信小程序轮播图滚动带动背景图变换及滚动对应图片下标

 今天呢，应召需求需求呢，做了一个轮播图在滑动，后面背景图也会跟着滑动变换。

一开始呢，的确没啥思路，突然想着做了轮播图滑动并且有图片数量的显示变换的，突然脑子一灵光，就想到办法了想试试。
首先呢，先放图片吧

这个是实现的状态，由于懒得弄gif图，就将就看一下吧
首先是wxml代码

<view class="swiper-all"><swiper class='all-img' indicator-dots='{{indiicatorDots}}' autoplay='{{autoplay}} ' interval='{{interval}}' duration='{{duration}}' indicator-color="#67ac0e" indicator-active-color="green" circular="{{circular}}" bindchange="indexChange"><view wx:for="{{imgUrl}}"><swiper-item><image src='{{item}}' data-src='{{item}}' class='carousel-img'></image></swiper-item></view></swiper><!-- 判断是第几张图片显示 --><block wx:if='{{current == 0}}'><view class="img-class"><image class="index-img" src="/pages/img/dingzhi3.png"></image></view></block><block wx:elif='{{current == 1}}'><view class="img-class"><image class="index-img" src="/pages/img/dingzhi4.png"></image></view></block></view>

接着是wcss代码

.swiper-all{margin-top: 100rpx;
}.all-img {margin-left: 5%;margin-right: 5%;
}.carousel-img {width: 100%;height: 260rpx;margin-top: 26rpx;border-radius: 30rpx;
}.img-class{width: 100%;margin-top: -340rpx;
}.index-img{width: 100%;height: 430rpx;
}

最后才是js代码

data:{
imgUrl: ["/pages/img/dingzhi.png","/pages/img/dingzhi2.png"],indiicatorDots: true,autoplay: true,interval: 3000,duration: 1000,current: 0,},indexChange(e) {var that = this;that.setData({current: e.detail.current})},

现在是轮播图滚动，图片对应的下标也跟着变动

逻辑和上面的背景滚动一样

<view class='all-img'><swiper indicator-dots='{{indiicatorDots}}' autoplay='{{autoplay}} ' interval='{{interval}}' duration='duration' indicator-active-color="#2095F2" indicator-color="#D9ECF9" bindchange="swiperChange" >//bindchange   bindtap意义不同哦   不懂的可以看下开发文档<view wx:for="{{huZhuImage}}"><swiper-item><image src='{{item}}' class='carousel-img'></image></swiper-item></view></swiper><view class="imageCount"><text class="count-text">{{current+1}}</text>/{{huZhuImage.length}}</view>
</view>

.all-img {margin-left: 5%;margin-right: 5%;
}.carousel-img {width: 100%;height: 260rpx;margin-top: 26rpx;border-radius: 30rpx;
}

data: {
huZhuImage: ["/pages/img/dingzhi.png","/pages/img/dingzhi4.png"],},自动触发时间swiperChange: function (e) {var that = this;that.setData({current: e.detail.current})},

这就是以上所有代码了，就能实现这个功能，有问题的可以留言哦。。。

微信小程序轮播图滚动带动背景图变换及滚动对应图片下标相关推荐

微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
微信小程序轮播图片自适应
微信小程序轮播图片自适应 //xml代码 <view class="rotation"><swiper class="home-swiper" ...
微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序轮播图 swiper图片组件
照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了 ...

微信小程序轮播图滚动带动背景图变换及滚动对应图片下标

微信小程序轮播图滚动带动背景图变换及滚动对应图片下标相关推荐

最新文章

热门文章