欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年12月05日 11:26:15   作者：故事外的人呀  
這篇文章主要介紹了微信小程序swiper左右擴展各顯示一半代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

這篇文章主要介紹了微信小程序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,
  // 設(shè)置頁面
  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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • js獲取html文件的思路及示例

    js獲取html文件的思路及示例

    html文件如何獲取，有很多朋友對此表示疑問，在本文將為大家介紹下使用js的或許方法，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-09-09
  • 基于JavaScript實現(xiàn)移動端無限加載分頁

    基于JavaScript實現(xiàn)移動端無限加載分頁

    這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)移動端無限加載分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • Ajax，UTF-8還是GB2312 eval 還是execScript

    Ajax，UTF-8還是GB2312 eval 還是execScript

    討厭的東西。 關(guān)于Ajax獲取HTML內(nèi)容編碼，與JavaScript載入腳本的動態(tài)執(zhí)行問題。
    2008-11-11
  • 純javascript移動優(yōu)先的幻燈片效果

    純javascript移動優(yōu)先的幻燈片效果

    這篇文章主要介紹了純javascript實現(xiàn)移動優(yōu)先的幻燈片效果，感興趣的小伙伴們可以參考一下
    2015-11-11
  • js正則表達式replace替換變量方法

    js正則表達式replace替換變量方法

    這篇文章主要介紹了js正則表達式/replace替換變量方法 ,最近項目任務(wù)繁重，更新博客會較慢，不過有時間希望可以把自己的積累分享出來，需要的朋友可以參考下
    2016-05-05
  • js選項卡的實現(xiàn)方法

    js選項卡的實現(xiàn)方法

    這篇文章主要介紹了js選項卡的實現(xiàn)方法,實例分析了js選項卡的實現(xiàn)思路及html+css布局與js功能技巧,非常具有實用價值,需要的朋友可以參考下
    2015-02-02
  • html的DOM中Event對象onblur事件用法實例

    html的DOM中Event對象onblur事件用法實例

    這篇文章主要介紹了html的DOM中Event對象onblur事件用法,實例分析了onblur事件的使用范圍與對應的javascript使用技巧,需要的朋友可以參考下
    2015-01-01
  • 使用JS將字符串保存成文件到本地(.txt、.json、.md)

    使用JS將字符串保存成文件到本地(.txt、.json、.md)

    工作中有時需要通過JavaScript保存文件到本地,下面這篇文章主要給大家介紹了關(guān)于使用JS將字符串保存成文件到本地的相關(guān)資料，分別包括生成.txt、.json、.md等文件,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-06-06
  • 微信小程序?qū)崿F(xiàn)美團菜單

    微信小程序?qū)崿F(xiàn)美團菜單

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)美團菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-06-06
  • JavaScript數(shù)組常用操作技巧匯總

    JavaScript數(shù)組常用操作技巧匯總

    這篇文章主要介紹了JavaScript數(shù)組常用操作技巧,以實例形式匯總了針對數(shù)組的查找、連接、排序及迭代等各種常見操作技巧,非常具有實用價值,需要的朋友可以參考下
    2014-11-11

最新評論