快捷導(dǎo)航

微信小程序swiper左右擴(kuò)展各顯示一半代碼實(shí)例

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

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

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

動(dòng)圖展示效果

代碼如下:

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,
  // 設(shè)置頁(yè)面
  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": {}
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js獲取html文件的思路及示例
html文件如何獲取，有很多朋友對(duì)此表示疑問，在本文將為大家介紹下使用js的或許方法，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-09-09
基于JavaScript實(shí)現(xiàn)移動(dòng)端無(wú)限加載分頁(yè)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)移動(dòng)端無(wú)限加載分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Ajax，UTF-8還是GB2312 eval 還是execScript
討厭的東西。關(guān)于Ajax獲取HTML內(nèi)容編碼，與JavaScript載入腳本的動(dòng)態(tài)執(zhí)行問題。
2008-11-11
純javascript移動(dòng)優(yōu)先的幻燈片效果
這篇文章主要介紹了純javascript實(shí)現(xiàn)移動(dòng)優(yōu)先的幻燈片效果，感興趣的小伙伴們可以參考一下
2015-11-11
js正則表達(dá)式replace替換變量方法
這篇文章主要介紹了js正則表達(dá)式/replace替換變量方法 ,最近項(xiàng)目任務(wù)繁重，更新博客會(huì)較慢，不過(guò)有時(shí)間希望可以把自己的積累分享出來(lái)，需要的朋友可以參考下
2016-05-05
js選項(xiàng)卡的實(shí)現(xiàn)方法
這篇文章主要介紹了js選項(xiàng)卡的實(shí)現(xiàn)方法,實(shí)例分析了js選項(xiàng)卡的實(shí)現(xiàn)思路及html+css布局與js功能技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
html的DOM中Event對(duì)象onblur事件用法實(shí)例
這篇文章主要介紹了html的DOM中Event對(duì)象onblur事件用法,實(shí)例分析了onblur事件的使用范圍與對(duì)應(yīng)的javascript使用技巧,需要的朋友可以參考下
2015-01-01
使用JS將字符串保存成文件到本地(.txt、.json、.md)
工作中有時(shí)需要通過(guò)JavaScript保存文件到本地,下面這篇文章主要給大家介紹了關(guān)于使用JS將字符串保存成文件到本地的相關(guān)資料，分別包括生成.txt、.json、.md等文件,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
微信小程序?qū)崿F(xiàn)美團(tuán)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)美團(tuán)菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06
JavaScript數(shù)組常用操作技巧匯總
這篇文章主要介紹了JavaScript數(shù)組常用操作技巧,以實(shí)例形式匯總了針對(duì)數(shù)組的查找、連接、排序及迭代等各種常見操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-11-11