微信小程序实现两边小中间大的轮播效果的示例代码


Posted in Javascript onDecember 07, 2018

好久没跟新博客了  今天没啥事来记录一下我的成果  哈哈哈

今天产品小姐姐过来跟我说改一下产品活动页的样式  我看了一眼发现有个轮播样式两边小中间大  这个我以前是没有写过的 而且在小程序中要实现  觉得应该不是很简单  想着记录一下吧  其实没我想的那么难实现

小程序有个组件轮播组件swiper  这个就可以直接使用  而且他提供了两个属性很实用

微信小程序实现两边小中间大的轮播效果的示例代码

这个可以帮助实现出现两边部分图片信息的功能

我主要的想法就是给个标识 当滑动到某个图片时让他的样式处于大图状态 他的上一张是缩小并出现左边部分  下一张缩小出现右边部分  所以我讲循环的图片数据改为了这样

imgUrls: [
   {
    url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
    isChange:1,
   },
   {
    url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
    isChange: 2,
   },
   {
    url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
    isChange: 3,
   },
  ],

字段isChange是用来判断图片样式的

页面代码

<swiper indicator-dots="{{false}}" autoplay="{{false}}" previous-margin='80rpx' next-margin='80rpx' bindchange='swiperChange'>
 <block wx:for="{{imgUrls}}" wx:for-item='item' wx:key=''>
  <swiper-item>
   <view class="shuffing-item {{item.isChange==2?'shuffing-item-next':item.isChange==0?'shuffing-item-preo':''}}">
    <image src="{{item.url}}"></image>
    <view class='shuffing-mask'>
     <text>开启不老童话</text> 
     <text>></text>
    </view>
   </view>
  </swiper-item>
 </block>
</swiper>

样式代码

swiper{
 height:520rpx;
 margin:20rpx 30rpx;
}
 
.shuffing{
 text-align: center;
 width:100%;
 position: relative;
}
.shuffing-item{
 position: absolute;
 width:100%;
 left:50%;
 top:50%;
 transform: translateX(-50%) translateY(-50%);
 height:520rpx;
 transition: all 0.3s;
}
.shuffing-item-next{
 width:85%;
 height:85%;
 transform:translateX(-100%) translateY(-50%);
 transition: all 0.3s;
}
.shuffing-item-preo{
 width:85%;
 height:85%;
 transform:translateX(40%) translateY(-50%);
 transition: all 0.3s;
}
.shuffing-item>image{
 width:100%;
 height:100%;
}
.shuffing-mask{
 position: absolute;
 bottom: 0;
 width:100%;
 line-height: 60rpx;
 background: rgba(0,0,0,0.6);
 color:#fff;
 display: flex;
 justify-content: space-between;
 padding:0 20rpx;
}

感觉小程序有个swiper组件还是挺简单实现的  没有刚开始想的那么难  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
vue跨域解决方法
Oct 15 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 #Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 #Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 #Javascript
使用react render props实现倒计时的示例代码
Dec 06 #Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 #Javascript
谈谈React中的Render Props模式
Dec 06 #Javascript
详解Vue-axios 设置请求头问题
Dec 06 #Javascript
You might like
让PHP更快的提供文件下载的代码
2012/06/13 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
深入浅析Python字符编码
2015/11/12 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
Python itertools.product方法代码实例
2020/03/27 Python
Keras设置以及获取权重的实现
2020/06/19 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
JSP&Servlet技术面试题
2015/05/21 面试题
安全生产承诺书
2014/03/26 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python