微信小程式把玩(十)swiper元件

2021-09-22 21:41:53 字數 1029 閱讀 4008

原文:

android寫過輪播圖的痛楚只有寫過的知道,相對還是比較麻煩的,並沒有乙個輪播圖元件,有個viewpage也需要自己定製,ios則多用uiscrollerview去實現,這個swiper封裝的相對還是方便的,使用方式也相對那倆容易些。

主要屬性

屬性只需要設定就行了 也可以抽到js檔案的data中進行資料繫結,監聽使用bindchange,在js中做業務處理。

wxml

indicator-dots="true"

autoplay="true"

duration="1000"

bindchange="listenswiper" >

style="background: red; height: 150px">

view>

swiper-item>

style="background: green; height: 150px">

view>

swiper-item>

style="background: blue; height: 150px">

view>

swiper-item>

swiper>

js

page(,
/** * 這裡處理滾動事件處理

*/ listenswiper:function

(e) ,

onload:function

(options),

onready:function

(), onshow:function

(), onhide:function

(), onunload:function

()})

微信小程式把玩(七)資料繫結

資料繫結有一部分前幾個看著還行,後面的幾個可能有幾個不理解,介面展示的資料有的也因為條件沒法顯示。看不懂的可以先記著,後面真正用到時就會明白,反正我是這樣想的。這裡先記錄下 data.wxml view id item 元件屬性view wx if 控制屬性view hindden 三元運算子vie...

微信小程式把玩(十七)input元件

input輸入框使用的頻率也是比較高的。樣式的話自己外面包裹個view自己定義。input屬性也不是很多,有需要自己慢慢測,嘗試 主要屬性 placeholder 請輸入賬號 placeholder style color red bindinput listenerphoneinput view ...

微信小程式把玩(九)scroll view元件

原文 scroll view為滾動檢視,分為水平滾動和垂直滾動。注意滾動檢視垂直滾動時一定要設定高度否則的話scroll view不會生效。滾動檢視常用的地方一般都是item項比較多的介面,比如我的模組 主要屬性 使用演示 wxml scroll y true style height 200px ...