微信小程序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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
浅谈JavaScript中this的指向问题
Jul 28 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
JAVA/JSP学习系列之六
2006/10/09 PHP
header()函数使用说明
2006/11/23 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python csv文件记录流程代码解析
2020/07/16 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
水务局局长岗位职责
2013/11/28 职场文书
工地宣传标语
2014/06/18 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
信用卡工作证明范本
2015/06/19 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书