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