微信小程序—轮播图+背景变化
先上效果:
1.轮播图效果
2.背景颜色会随着轮播图变化
代码实现:
HTML:
<view class="tab-list-movie" style="background:{{bgColor[swiperIndex]}}"><swiper class="movie-swiper" autoplay interval="3000" circular indicator-dots indicator-active-color="white" bindchange="getSwiperIndex"><swiper-item class="swiper-item" wx:for="{{swiperImg}}" wx:key="index"><image class="swiper-item-img" mode="heightFix" src="{{item}}" /></swiper-item></swiper>
</view>
JS:
data:{//轮播图素材swiperImg: ["../images/swiper1.jpg","../images/swiper2.jpg","../images/swiper3.jpg","../images/swiper4.jpg"],swiperIndex:0,//轮播图索引bgColor:["linear-gradient(#33299c,#f1f1f1,#f1f1f1,#f1f1f1)","linear-gradient(#433c36,#f1f1f1,#f1f1f1,#f1f1f1)","linear-gradient(#900b08,#f1f1f1,#f1f1f1,#f1f1f1)","linear-gradient(#eda23c,#f1f1f1,#f1f1f1,#f1f1f1)",],// linear-gradient 渐变色需要四个颜色属性
}//监听轮播图索引事件
getSwiperIndex(e){let currentIndex = e.detail.currentthis.setData({swiperIndex:currentIndex})
},
.tab-list-movie {height: 100vh;
}
.movie-swiper{padding-top: 80rpx;margin: 0 32rpx;height: 200rpx;
}
.swiper-item{width: 100%;height: 100%;border-radius: 16rpx;
}
.swiper-item-img{width: 100%;height: 100%;border-radius: 20rpx;
}
代码展示效果:
微信小程序—轮播图+背景变化相关推荐
- 五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名 类型 默认值 说明 autoplay Boole ...
- 微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
- 微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
- 微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档 文档https://developers.weixin.qq.com/miniprogram/dev ...
- 微信小程序 轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码: <!-- 轮播图组件 --> <swiper class="swiper" in ...
- 微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题 在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
- 微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下 效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
- 微信小程序 # 轮播图swiper滑动到最后一页进行页面跳转
需求背景 首次启动小程序时要用轮播图做展示,希望能实现滑动到最后一页自动就跳转到首页 实现思路 <view class="container" id="first- ...
- 微信小程序 轮播图 swiper图片组件
照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了 ...
- 微信小程序轮播图的实现
在Android或者ios中几乎所有的app都有轮播图这个效果,在android中一般是使用viewpager来实现的,在微信小程序中一般是用 swiper这个标签来实现的,我们在微信小程序文档中可以 ...
最新文章
- tensorflow 利用索引获取tensor特定元素
- 图片轮播器,relativelayout,外加textview小结
- Hasor【付诸实践 02】SpringBoot 集成 Dataway 无代码接口工具配置及问题解决(含GreenPlum建表语句、demo源码、测试说明)
- 冯诺依曼架构的 IO 鸿沟,谁能来填补?
- 前端编程之jQuery
- SMPP Java示例(客户端)
- zookeeper在hadoop的应用
- 拓端tecdat|用RSHINY DASHBOARD可视化美国投票记录
- BZ OJ 2818 Gcd (欧拉函数)
- Android 9 (P) Zygote进程启动源码分析指南一
- 三位一体的漏洞分析方法-web应用安全测试方法
- 2021-09-28 网安实验-取证分析-Pcap流量包取证
- Linux内核中获取纳秒时间戳的方法
- 痞子衡嵌入式:记录i.MXRT1060驱动LCD屏显示横向渐变色有亮点问题解决全过程(解答篇)...
- RuntimeError: NCCL error in: /pytorch/torch/lib/c10d/ProcessGroupNCCL.cpp:784, unhandled system erro
- 【C语言知识梳理之分支语句】
- 华为云有没有实力挑战阿里云?
- I.MX6ULL开发板基于阿里云项目实战 3 :阿里云iot-SDK 移植到arm开发板
- matlab乖离率计算,乖离率指标详细说明计算
- js jq 图片上传功能