微信小程序swiper左右擴展各顯示一半代碼實例

更新時間：2019年12月05日 11:26:15 作者：故事外的人呀

這篇文章主要介紹了微信小程序swiper左右擴展各顯示一半代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

實現(xiàn)如下的功能：

動圖展示效果

代碼如下:

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": {}
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS/HTML5游戲常用算法之碰撞檢測包圍盒檢測算法詳解【凹多邊形的分離軸檢測算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測包圍盒檢測算法,結(jié)合實例形式詳細分析了javascript針對凹多邊形的分離軸檢測算法相關概念、原理、實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
2018-12-12
js原生appendChild的bug解決心得分享
appendChild主要是用來追加節(jié)點插入到最后；循環(huán)的時候由于不停的搬家導致length 在改變，改用for的話開始的length已經(jīng)被固定，問題就解決啦
2013-07-07
javascript下arguments,caller,callee,call,apply示例及理解
在看到大家如此關注JS里頭的這幾個對象，我試著把原文再修改一下，力求能再詳細的闡明個中意義
2009-12-12
JavaScript實現(xiàn)判斷圖片是否加載完成的3種方法整理
這篇文章主要介紹了JavaScript實現(xiàn)判斷圖片是否加載完成的3種方法整理,本文講解了onload方法、javascipt原生方法、jquery方法三種方法,需要的朋友可以參考下
2015-03-03
原生Javascript封裝的一個AJAX函數(shù)分享
這篇文章主要介紹了原生Javascript封裝的一個AJAX函數(shù)分享,本文是實際項目中提取出來的,簡單易用,需要的朋友可以參考下
2014-10-10
javascript中取前n天日期的兩種方法分享
這篇文章主要介紹了javascript中取前n天日期的兩種方法，有需要的朋友可以參考一下
2014-01-01
彪哥1.1(智能表格)提供下載
彪哥1.1(智能表格)提供下載...
2006-09-09
js圖片放大鏡實例講解(必看篇)
下面小編就為大家?guī)硪黄猨s圖片放大鏡實例講解(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
如何讓js中的if判斷如絲般順滑詳解
條件判斷語句是程序開發(fā)過程中一種經(jīng)常使用的語句形式,和大部分編程語言相同,JavaScript 中也有條件判斷語句,這篇文章主要給大家介紹了關于如何讓js中的if判斷如絲般順滑的相關資料,需要的朋友可以參考下
2021-10-10
svg插入foreignObject無法響應事件解決
這篇文章主要為大家介紹了svg插入foreignObject無法響應事件解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10