微信小程序swiper左右扩展各显示一半代码实例


Posted in Javascript onDecember 05, 2019

这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

实现如下的功能:

微信小程序swiper左右扩展各显示一半代码实例

动图展示效果

代码如下:

index.wxml

<swiper class='swiper' next-margin='120rpx' bindchange='swiper'>
 <block wx:for="{{devices}}" wx:key="" wx:for-item="device">
  <swiper-item item-id="{{device.type}}">
   <view class="device {{swiperIndex == index ?'active':''}}" data-currentTab="{{index}}">
    <view class='device-img'>
     <image src='{{device.deviceImg}}'></image>
    </view>
   </view>
  </swiper-item>
 </block>
</swiper>

index.js

Page({
 data: {
  swiperIndex: 0,
  // 设置页面
  devices: [
   {
    deviceImg: "../../img/1.jpg"
   },
   {
    deviceImg: "../../img/2.jpg"
   },
   {
    deviceImg: "../../img/3.jpg"
   }
  ],
 },
 swiper: function (e) {
  let that = this;
  let index = e.detail.current;
  that.setData({
   swiperIndex: index
  });
 }
})

index.wss

/* 轮播图 */
.devices{
 width: 638rpx;
}
.swiper{
 width: 580rpx;
 height: 600rpx;
 margin-left:48rpx;
 white-space:nowrap;
 /* border: solid red 1px; */
}

.device{
 width: 410rpx;
 height: 94%;
 display:inline-block;
 margin-left: 20rpx;
 background: rosybrown;
 transform: scale(0.9);
 transition:all .2s ease 0s; 
}
.active{
 transform: none;
 transition: all 0.2s ease-in 0s;
}
.device-img{
 width: 100%;
 height: 520rpx;
 margin-top: 40rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}
.device-img image{
 width:350rpx;
 height:190rpx;
}

index.json

{
 "usingComponents": {}
}

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

Javascript 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
Javascript实现信息滚动效果
May 18 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 #Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 #Javascript
React 父子组件通信的实现方法
Dec 05 #Javascript
Javascript中的this,bind和that使用实例
Dec 05 #Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 #Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 #Javascript
You might like
为PHP初学者的8点有效建议
2010/11/20 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
深入PHP数据加密详解
2013/06/18 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php中数组最简单的使用方法
2020/12/27 PHP
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python中常见的数据类型小结
2015/08/29 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
如何在django中实现分页功能
2020/04/22 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
《和田的维吾尔》教学反思
2014/04/14 职场文书
社区平安建设方案
2014/05/25 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
企业贷款委托书格式
2014/09/12 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫