微信小程式常用控制項彙總

2022-09-11 05:48:12 字數 4054 閱讀 3181

<

image

src="/images/aaa.png"

>

image

>

2.文字標籤:

<

text

>hello

text

>

3.swiper滑動輪播:

<

swiper

catchtap

="onswipertap"

vertical

="}"

indicator-dots

="true"

autoplay

="true"

interval

="5000"

>

<

swiper-item

>

<

image

id="7"

src="/images/wx.png"

data-postid

="3"

>

image

>

swiper-item

>

<

swiper-item

>

<

image

src="/images/vr.png"

data-postid

="4"

>

image

>

swiper-item

>

<

swiper-item

>

<

image

src="/images/iqiyi.png"

data-postid

="5"

>

image

>

swiper-item

>

swiper

>

單擊事件

onswipertap: function

(event) )

}

4.wx:if:

控制顯示隱藏

<

image

wx:if

="}"

src="/images/wx.png"

>

image

>

5.wx:for

迴圈遍歷

<

block

wx:for

="}"

wx:for-item

="item"

wx:for-index

="idx"

>

block

>

6.單擊事件:

<

view

bindtap

="sayhello"

>

view

>

sayhello:function

()

7.頁面跳**

有父子關係(最多5級)

wx:n**igateto();

平行跳轉

wx:redirectto();

8.在乙個js中讀取另乙個js中的資料:

在乙個js中建立並輸出本地資料

module.exports=

在另乙個js中引用並獲取資料

var postsdata=require('../../data/posts-data.js')

使用資料

this

.setdata();

9.template模板:

建立並定義template

<

template

name

='postitem'

>

template

>

在需要的wxml中引用

<

import

src='post-item/post-item-template.wxml'

/>

在wxss中引用樣式

@import 'post-item/post-item-template.wxss';

使用template並新增單擊事件

<

block

wx:for

="}"

wx:for-item

="item"

>

<

view

catchtap

='onposttap'

data-postid

='}'

>

<

template

is='postitem'

data

='}'

/>

view

>

block

>

var postid =event.currenttarget.dataset.postid;

template傳遞資料的另一種方式

<

template

is="starstemplate"

data

="}"

/>

onload:function

(option)

11.小程式快取:

快取普通文字

wx.setstoragesync('key', "hello man");

快取物件

wx.setstoragesync('key', );

獲取快取

var name=wx.getstoragesync('key');

刪除快取

wx.removestoragesync('key');

清除所有快取

wx.clearstoragesync();

非同步快取

getpostscollectedasy: function

() })

}

wx.showtoast()

13.showactionsheet:

onsharetap: function

(event)

})}

14.全域性變數的與獲取:

globaldata:

})獲取

<

image

wx:if

="}"

catchtap

='oncolletiontap'

src="/images/icon/collection.png"

>

image

>

<

image

wx:else catchtap

='oncolletiontap'

src="/images/icon/collection-anti.png"

>

image

>

<

image

class

='audio'

src="}"

>

image

>

微信小程式常用樣式彙總

小程式特點 用完即走 低頻使用 效能要求低,不支援webview text 2.設定彈性盒子模型 container 3.設定頁面全屏樣式及背景色 page window 5.頁面設定導航條顏色和標題 json 6.設定字型屬性 user name 7.建立圓角矩形邊框 moto container...

微信小程式問題彙總

每個頁面的檔案都要在.js檔案中加上page 官方文件如下 wx.request header success function res 原因是開發工具公升級後,請求的header的content type寫法變了,改成 json 即可。參考 電影詳情介面api為 這裡的id為每部電影所對應的id,...

微信小程式設定控制項權重

1.橫向水平布局 實現水平布局,需要四個view容器元件,其中乙個是父容器。如下 box1 box2 box3 給父容器以下樣式 1 index.wxss 2 content其中display flex將view設定為彈性布局,flex direction row 設定布局的方向是橫向水平布局。在三...