【小程式】小程式swiper元件實現間距輪播
swiper元件實現不同效果間距輪播
先不急著看實現過程,先看看三種效果圖,如果是你想要的效果那請看下面的過程,不是的話也不浪費大家的時間(就是這麼體貼唉)。
常見問題:
小程式swiper有時候滑動,滑來滑去會卡在中間,跳轉到別的頁面在跳轉回來還是一樣的卡在哪裡,猜測是輪播圖下標的問題,所以,就在onshow哪裡,跳轉回來的時候,初始化下標就可以解決問題
this.setData({
current: 1,
})
效果圖一 利用css
效果圖二 利用css
效果圖三 利用css 和 js實現兩邊小 中間大
如果有你想要的效果,那就繼續往下看,沒有那就出門右(別)拐(走)吧。
一開始想著如果和swiper.js一樣,那就好了,看了下文件就放棄了。網上找了一下還是沒找到具體實現方法,就開始自己倒騰,就想到幾個辦法,看客們講究著試試吧。
第一種效果 普通的間隔輪播
1:wxml
<view class='test'>
<swiper display-multiple-items='1'> // 這裡是設定顯示一張
<block wx:for="{{imgUrls}}"> // 遍歷js中的圖片
<swiper-item> // box外層swiper
< view class='box'> // 重點處理box
<image src='{{item}}'></image>
<view class='content'>
<text>測試</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
2:wxss
.test{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
swiper{
height: 100%;
}
.content{
font-size: 16px;
color: #333;
padding: 20rpx 40rpx;
}
swiper-item{ // 此時的swiper-item是佔據一個頁面的
text-align: center; // 讓其中的內容居中顯示
}
swiper-item image{
width: 100%;
}
.box{ // box設定寬高(更具設計稿自定義吧)
width: 80%;
height: 700rpx;
display: inline-block;
margin-top: 40px;
box-sizing: border-box;
box-shadow: 0 0 4px 4px #f2f2f2; // 給box新增陰影效果更顯著
}
這種實現是利用css來間接達到輪播間距的效果:
- swiper利用display-multiple-items='1’屬性 一次展示一張
- swiper-item新增內容居中
- 內容設定寬高
- 最後就可以得到一次一張且有間距的輪播圖
第二種效果 帶邊界的間隔輪播
依舊按照上面的css不用大改,改已改box的寬度即可,按照你想要的效果去設定大小。
.box{
width: 90%;
}
只需要在swiper元件上加兩個屬性,來達到預留空間給裡面box。在加上circular屬性銜接滑動(無縫連線)。
第三種效果 兩邊小中間大動畫輪播
1:wxml
<view class='test'>
<swiper display-multiple-items='1' circular previous-margin='50px' next-margin='50px' bindchange='change' current='{{current}}'>
<block wx:for="{{imgUrls}}" wx:key='{{index}}'>
<swiper-item>
<view class="box" data-index='{{index}}' animation="{{index == current?animationData:animationData2}}">
<image src='{{item}}'></image>
<view class='content'>
<text>測試</text>
<text>測試</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
2:wxss
.test{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
swiper{
height: 100%;
}
.content{
font-size: 16px;
color: #333;
padding: 20rpx 40rpx;
}
swiper-item{
text-align: center;
}
swiper-item image{
width: 100%;
}
.box{
width: 90%;
height:600rpx;
display: inline-block;
margin-top: 40px;
box-sizing: border-box;
box-shadow: 0 0 4px 4px #f2f2f2;
position:relative;
top:33%;
transform:translateY(-45%);
}
3.js 利用animate來過渡動畫,當下標相同的額時候執行放大的動畫
Page({
/**
* 頁面的初始資料
*/
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
current: 0,
animationData: {},
animationData2: {}
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
this.stretch(350)
},
change(e){
this.setData({
current: e.detail.current
})
this.stretch(350)
this.shrink(300)
},
// 收縮
stretch(h){
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.height(h).step()
this.setData({
animationData: animation.export(),
})
},
// 展開
shrink(h){
var animation2 = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation2 = animation2
animation2.height(h).step()
this.setData({
animationData2: animation2.export()
})
},
})
以上就是三種輪播實現的方式,如果有疑問的可以下面留言,或者你有更好的方法,可以留言,郵箱傳送
相關推薦
【小程式】小程式swiper元件實現間距輪播
swiper元件實現不同效果間距輪播 先不急著看實現過程,先看看三種效果圖,如果是你想要的效果那請看下面的過程,不是的話也不浪費大家的時間(就是這麼體貼唉)。 常見問題: 小程式swiper有時候滑動,滑來滑去會卡在中間,跳轉到別的頁面在跳轉回來還是一樣的卡在哪
+【CSS3】使用純css程式碼實現圖片輪播效果
使用純CSS3程式碼實現簡單的圖片輪播。 基本思路: 以5張圖片為例: 1.基本佈局: 將5張圖片左浮動橫向並排放入一個div容器(#photos)內,圖片設定統一尺寸,div寬度設定5個圖片的總尺寸,然後放入相框容器div(#frame),相框設定1個圖片
【Android基礎知識】使用Gallery和ImageSwitcher實現圖片輪播效果
使用Gallery和ImageSwitcher實現滑動Gallery,切換ImageSwitcher的圖片。 佈局檔案 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
vue.js中使用swiper外掛實現圖片輪播
第一步:安裝swiper:npm install [email protected] --save-dev 完成之後,你會在專案的node_modules資料夾中多一個swiper資料夾。 第二步:引用元件 import Swiper from 'swiper
iOS開發UI基礎—29UIScrollView控制元件實現圖片輪播
一、實現效果 實現圖片的自動輪播 二、實現程式碼 storyboard中佈局 程式碼: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegat
- StoryBoard間切換與UIScrollView控制元件實現圖片輪播
介面切換在專案中可以把耦合度比較高的介面放在通過一個StoryBoard中,可以按照功能使用多個StoryBoard搭建介面,這樣便於專案維護以及多人開發,對於多個StoryBoard間切換,可以使用以下程式碼:@IBAction func ChangeOne(sender:
(四)微信小程式--輪播圖swiper元件實現及Boolean值陷阱
輪播圖 swiper 元件 前期需要的搭建 將需要輪播的圖片儲存到/images/post/ 目錄下,沒有就建立它 在pages目錄下新建一個名為post的目錄,然後在post目錄下新建頁面所需要的4個檔案post.js, post.json, post.wxml, p
【小程式】小程式中設定 tabBar
小程式中 tabBar 的設定,tabBar 就是底部導航欄,在app.json中配置。 list 為陣列至少兩項。tab欄的 position 為 top 時間,不顯示圖示。 "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e",
【c語言】小程式遊戲——飛機遊戲(一)
下面來介紹一個簡單的遊戲,其中用到的c語言知識屬於基礎內容,所以特別容易上手 ~~~~~~~飛機遊戲~~~~~~~~~ 首先按照常理我們知道,肯定要在介面上繪製出一個飛
【c語言】小程式遊戲——飛機遊戲(二)
在接下來,我們需要對飛機新增一些屬性: 1.利用鍵盤控制飛機的移動
【c語言】小程式遊戲——飛機遊戲(三)
接下來,我們需要在進行以下操作: 1.在程式裡面新增敵機
【微信小程式】小程式引入echarts統計圖
前言 微信現在是太多人使用了,應用這東西也非常的多,也包含小程式了,小程式發展到現在已經是非常好了。我很久都沒寫小程式的教程了,現在就開始今天的教程吧。 預覽 官方git網站。你可以微信掃一掃掃下
【小程式】小程式安卓與ios相容問題
1,formId 不同 說明:安卓與ios下的formId的規則是不一樣的,之前由於後端攔截了導致報錯 ios下的formId 安卓下的formId 2,儘量少用定位fixed的百分比 說明:由於小程式是用rpx作為單位,rpx擁有自適應作用,當螢幕大小比例出現變化時
【小程式】小程式簡單實現雙擊事件
由於某個需求需要使用到雙擊事件,而小程式並沒有雙擊事件,so 雙擊事件其實就是兩次單擊的時間相差小於300ms 雙擊和單擊並存時的實現 doubleClick(e){ //e.timeStamp:當前點選時的毫秒數; // this.touchStartTime: 儲存上
【java小程式】小程式視訊上傳檔案的前後端程式碼
文章目錄 小程式端程式碼 1、上傳視訊選中事件 2、背景音樂的頁面載入 上傳檔案的後端程式碼 上傳小視訊功能,我們是通過我的主頁點選上傳按鈕進行上傳,選中視訊後會
【微信小程式】小程式的動態傳參
在微信小程式的開發過程中經常會用到動態傳參,比如根據某一頁面傳參的不同,載入不同的新的頁面。接下來介紹下如何實現。 上一篇部落格中介紹瞭如何用wx:for迴圈顯示陣列,一般情況下我們要實現的功能是點選
【樹懶清單】小程式更新2018-10-28
V3.0 1. 進入小程式後直接進入未完成任務頁面,少一層跳轉 2. 函式封裝優化 3. 完成任務後直接返回未完成任務頁面。 4. 未完成任務頁面只顯示未完成任務。
【微信】 小程式 推送模板訊息 (java)
大致流程圖: Created with Raphaël 2.1.2從微信小程式後臺建立模板獲取access_token拼接微信teamplatedata傳送到微信推送訊息 收集form_id 有時我們需要A使用者操作後對B使用者推送模板訊息這是就需
【微信小程式】小程式讀取本地資料
一般情況下,小程式的utils這個資料夾下,我們可以把本地的資料寫進去,封裝成.js檔案,提供對外暴露的介面,然後讀取本地資料。如果涉及到一些針對這些資料的處理方法,也可以把方法寫好,封裝到.js檔案裡面,然後需要時呼叫。 module.exports = { mt
微信小程式swiper元件實現圖片寬度自適應
微信小程式 圖片寬度自適應的實現 例項程式碼: wxml 程式碼: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autopla