微信小程序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 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
JS重要知识点小结
Nov 06 Javascript
jquery中post方法用法实例
Oct 21 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
vue模块移动组件的实现示例
May 20 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
js动态引入的四种方法
2018/05/05 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
微信小程序实现时间戳格式转换
2020/07/20 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
Python实现统计单词出现的个数
2015/05/28 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
医学专业大学生求职的自我评价
2013/11/27 职场文书
《四季》教学反思
2014/04/08 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python
详解flex:1什么意思
2022/07/23 HTML / CSS