微信小程序3D轮播图
<!-- 轮播图 -->
<swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'>
<swiper-item wx:for='{{imgList}}' wx:key=''>
<image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
</swiper-item>
</swiper>
<!-- 轮播图end -->
swiper {
padding-top: 30px;
}
.le-img {
width: 100%;
display: block;
transform: scale(0.8);
transition: all 0.3s ease;
border-radius: 6px;
}
.le-img.le-active {
transform: scale(1);
}
// pages/swiper/swiper.js
Page({ /**
* 页面的初始数据
*/
data: { swiperH: '',//swiper高度
nowIdx: 0,//当前swiper索引
imgList: [//图片列表
'../../imgs/swiper1.jpg',
'../../imgs/swiper2.jpg',
'../../imgs/swiper3.jpg',
]
}, //获取swiper高度
getHeight: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth - 2 * 50;//获取当前屏幕的宽度
var imgh = e.detail.height;//图片高度
var imgw = e.detail.width;
var sH = winWid * imgh / imgw + "px"
this.setData({
swiperH: sH//设置高度
})
},
//swiper滑动事件
swiperChange: function (e) {
this.setData({
nowIdx: e.detail.current
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
微信小程序3D轮播图的更多相关文章
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- 小程序 swiper 轮播图滚动图片 + 视频
直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...
- 微信小程序 swiper轮播 自定义indicator-dots样式
index.wxml <view class="swiperContainer"> <swiper bindchange="swiperChange&q ...
- 小程序图片轮播特效swiper(纯手打)
前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...
- CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- c++ 向上取整和向下取整
在c++ 中: ceil()表示向上取整 floor()表示向下取整 当然,这很显然对浮点数很好用. 但如果两个int类型的数想要向上取整呢? 我们用 (n-1)/m+1 来表示即可.
- Kuroni and the Punishment CodeForces - 1305F 随机函数mt19937 + 质因子分解
题意: 给你n个数,你每次操作可以对一个数加1或者减1,让你求你最少需要操作多少次可以使这n个数的公因子大于1 题解: 正常方法就是枚举质因子(假设质因子为x),然后对于这个数组中的数a[i],让a[ ...
- Codeforces Global Round 7 D2. Prefix-Suffix Palindrome (Hard version)(Manacher算法+输出回文字符串)
This is the hard version of the problem. The difference is the constraint on the sum of lengths of s ...
- Codeforces Round #496 (Div. 3) E1. Median on Segments (Permutations Edition) (中位数,思维)
题意:给你一个数组,求有多少子数组的中位数等于\(m\).(若元素个数为偶数,取中间靠左的为中位数). 题解:由中位数的定义我们知道:若数组中\(<m\)的数有\(x\)个,\(>m\)的 ...
- 01背包记录路径 (例题 L3-001 凑零钱 (30分))
题意: 就是找出来一个字典序最小的硬币集合,且这个硬币集合里面所有硬币的值的和等于题目中的M 题解: 01背包加一下记录路径,如果1硬币不止一个,那我们也不采用多重背包的方式,把每一个1硬币当成一个独 ...
- HDU - 4725 The Shortest Path in Nya Graph 【拆点 + dijkstra】
This is a very easy problem, your task is just calculate el camino mas corto en un grafico, and just ...
- Java解决Hash(散列)冲突的四种方法--开放地址法(线性探测,二次探测,伪随机探测)、链地址法、再哈希、建立公共溢出区
最近时间有点紧,暂时先放参考链接了,待有时间在总结一下: 查了好多,这几篇博客写的真心好,互有优缺点,大家一个一个看就会明白了: 参考 1. 先看这个明白拉链法(链地址法),这个带源码,很好看懂,只不 ...
- vue项目webpack打包后修改配置文件
从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...
- Python求二维数组中某列的最大值
主要运用np.amax() import numpy as np help(np.amax) a = np.arange(9).reshape((3, 3)) max_all = np.amax(a) ...
- git branch & git remote branch
git branch & git remote branch $ git branch -h usage: git branch [<options>] [-r | -a] [-- ...