欧美亚洲综合图区在线|天天射天天干国产成卜|99久久免费国产精精品|国产的欧美一区二区三区|日韩中文字幕无码不卡专区|亚麻成人aV极品一区二区|国产成人AV区一区二区三|成人免费一区二区三区视频网站

當(dāng)前位置:首頁 > 軟件開放 > 正文內(nèi)容

微信小程序折疊面板(小程序疊放)

軟件開放2年前 (2023-04-02)1701

本篇文章給大家談?wù)勎⑿判〕绦蛘郫B面板,以及小程序疊放對(duì)應(yīng)的知識(shí)點(diǎn),希望對(duì)各位有所幫助,不要忘了收藏本站喔。

本文目錄一覽:

電腦上使用微信小程序,電腦怎么翻頁

首先電腦打開并登錄微信。

左側(cè)點(diǎn)擊小程序面板按鈕;其中包含最近使用和我的小程序,點(diǎn)擊向下三角可顯示更多;打開并進(jìn)入小程序鼠標(biāo)點(diǎn)擊進(jìn)行使用即可;需要關(guān)閉退出小程序,點(diǎn)擊右上角按鈕。

微信小程序,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。全面開放申請(qǐng)后,主體類型為企業(yè)、政府、媒體、其他組織或個(gè)人的開發(fā)者,均可申請(qǐng)注冊(cè)小程序。微信小程序、微信訂閱號(hào)、微信服務(wù)號(hào)、微信企業(yè)號(hào)是并行的體系。

詳解mpvue中使用vant時(shí)需要注意的onChange事件的坑

最近用了一下Vant

Weapp組件庫,但是由于我是用mpvue寫的,所以自然跟小程序引用不一樣,比如我最近引用了vant里面的collapse折疊面板,官網(wǎng)文檔里面介紹的使用方法是這樣的

1.在

app.json

index.json

中引入組件

"usingComponents":

{

"van-collapse":

"path/to/vant-weapp/dist/collapse/index",

"van-collapse-item":

"path/to/vant-weapp/dist/collapse-item/index"

}

2.通過value控制展開的面板列表,activeNames為數(shù)組格式

van-collapse

value="{{

activeNames

}}"

van-collapse-item

title="有贊微商城"

name="1"

提供多樣店鋪模板,快速搭建網(wǎng)上商城

/van-collapse-item

van-collapse-item

title="有贊零售"

name="2"

網(wǎng)店吸粉獲客、會(huì)員分層營(yíng)銷、一機(jī)多種收款,告別經(jīng)營(yíng)低效和客戶流失

/van-collapse-item

van-collapse-item

title="有贊美業(yè)"

name="3"

disabled

線上拓客,隨時(shí)預(yù)約,貼心順手的開單收銀

/van-collapse-item

/van-collapse

Page({

data:

{

activeNames:

['1']

},

onChange(event)

{

this.setData({

activeNames:

event.detail

});

}

});

但是在mpvue里面不能直接這樣引入

下面是我的代碼

van-collapse

:value="activeNames"

@change="onChange($event)"

van-collapse-item

title="有贊微商城"

name="1"

提供多樣店鋪模板,快速搭建網(wǎng)上商城

/van-collapse-item

van-collapse-item

title="有贊零售"

name="2"

網(wǎng)店吸粉獲客、會(huì)員分層營(yíng)銷、一機(jī)多種收款,告別經(jīng)營(yíng)低效和客戶流失

/van-collapse-item

van-collapse-item

title="有贊美業(yè)"

name="3"

disabled

線上拓客,隨時(shí)預(yù)約,貼心順手的開單收銀

/van-collapse-item

/van-collapse

export

default

{

data

()

{

return

{

activeName:

'1'

}

},

methods:

{

onChange

(event)

{

console.log(event)

this.activeName

=

event.mp.detail

}

}

}

得把原生小程序使用方式為改為mpvue

使用方式

首先是數(shù)據(jù)綁定方式

value="{{activeNames}}"

改為

v-bind:value="activeNames"

//或者

:value="activeNames"

然后是事件監(jiān)聽

在van-collapse組件里加個(gè)監(jiān)聽事件

@change="onChange($event)"

mpvue中獲取event值也與原生小程序有所不同:

onChange(event){

//

獲取表單組件filed的值

console.log(event.mp.detail)

//

注意加入mp

}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:詳解如何搭建mpvue框架搭配vant組件庫的小程序項(xiàng)目mpvue+vant

app搭建微信小程序的方法步驟

微信小程序怎么實(shí)現(xiàn)內(nèi)容的展開和收起?

看到一個(gè)需求,對(duì)一些前端小白或者剛開始寫小程序的人來說,可能會(huì)有點(diǎn)幫助,效果如下:

就是以上效果,廢話不多說,上代碼

wxml:

view class='list_box' wx:for='{{list}}' wx:key='this' wx:for-item='parentItem' wx:for-index='parentIndex'

view class='list'

view class='list_name_box' catchtap='listTap' data-parentindex='{{parentIndex}}'

text class='list_item_name'{{parentItem.listName}}/text

image src='/img/down.png' class='icon_down {{parentItem.show"icon_down_rotate"}}'/image

/view

view class='list_item_box' wx:if='{{parentItem.show}}'

view class='list_item' wx:for='{{parentItem.item}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}' ?data-parentindex='{{parentIndex}}'

view class='list_item_name_box'

text class='list_item_name'{{item.itemName}}/text

image src='/img/down.png' class='icon_down {{item.show"icon_down_rotate"}}'/image

/view

view class='other_box' wx:if='{{item.show}}'

view class='other'

text class='other_title'內(nèi)容:/text

text class='other_text'{{item.content}}/text

/view

view class='other'

text class='other_title'時(shí)間:/text

text class='other_text'{{item.time}}/text

/view

/view

/view

/view

/view/view

然后wxss:

page{

background: #f3f7f7;}.list_name_box{

background: #fff;

border-bottom: 1px solid #efefef;

display: flex;

height: 90rpx;

align-items: center;

padding: 0 25rpx;

font-size: 32rpx;}.list_item_name{

flex: 1;}.icon_down{

width: 35rpx;

height:35rpx;

transition:transform ?0.3s;}/* .list_item_box{

height: 0;

transition:height ?0.3s;

overflow: hidden;

}

.list_item_box_show{

height: 500rpx;

} */.list_item_name_box{

background: #fff;

font-size: 30rpx;

height: 80rpx;

display: flex;

align-items: center;

padding: 0 25rpx 0 50rpx;}.other{

display: flex;

height: 80rpx;

padding: 0 25rpx 0 50rpx;

align-items: center;

font-size: 30rpx;

color: #666;}.icon_down_rotate{

transform:rotate(180deg);}

JS:

// pages/dome/dome.jsPage({

/**

* 頁面的初始數(shù)據(jù)

*/

data: {

list:[

{listName:'列表1',

item:[{

itemName:'子列表1-1',

content:'1-1中的內(nèi)容',

time: '2015-05-06'

}, {

itemName: '子列表1-2',

content: '1-2中的內(nèi)容',

time: '2015-04-13'

}, {

itemName: '子列表1-3',

content: '1-3中的內(nèi)容',

time: '2015-12-06'

}]

},

{

listName: '列表2',

item: [{

itemName: '子列表2-1',

content: '2-1中的內(nèi)容',

time: '2017-05-06'

}, {

itemName: '子列表2-2',

content: '2-2中的內(nèi)容',

time: '2015-08-06'

}, {

itemName: '子列表2-3',

content: '2-3中的內(nèi)容',

time: '2015-11-06'

}]

}, {

listName: '列表3',

item: [{

itemName: '子列表3-1',

content: '3-1中的內(nèi)容',

time: '2015-05-15'

}, {

itemName: '子列表3-2',

content: '3-2中的內(nèi)容',

time: '2015-05-24'

}, {

itemName: '子列表1-3',

content: '3-3中的內(nèi)容',

time: '2015-05-30'

}]

}

]

},

//點(diǎn)擊最外層列表展開收起

listTap(e){

console.log('觸發(fā)了最外層');

let Index = e.currentTarget.dataset.parentindex,//獲取點(diǎn)擊的下標(biāo)值

list=this.data.list;

list[Index].show = !list[Index].show || false;//變換其打開、關(guān)閉的狀態(tài)

if (list[Index].show){//如果點(diǎn)擊后是展開狀態(tài),則讓其他已經(jīng)展開的列表變?yōu)槭掌馉顟B(tài)

this.packUp(list,Index);

}

this.setData({

list ? ?});

},

//點(diǎn)擊里面的子列表展開收起

listItemTap(e){

let parentindex = e.currentTarget.dataset.parentindex,//點(diǎn)擊的內(nèi)層所在的最外層列表下標(biāo)

Index=e.currentTarget.dataset.index,//點(diǎn)擊的內(nèi)層下標(biāo)

list=this.data.list;

console.log(list[parentindex].item,Index);

list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//變換其打開、關(guān)閉的狀態(tài)

if (list[parentindex].item[Index].show){//如果是操作的打開狀態(tài),那么就讓同級(jí)的其他列表變?yōu)殛P(guān)閉狀態(tài),保持始終只有一個(gè)打開

for (let i = 0, len = list[parentindex].item.length;ilen;i++ ){

if(i!=Index){

list[parentindex].item[i].show=false;

}

}

}

this.setData({list});

},

//讓所有的展開項(xiàng),都變?yōu)槭掌?/p>

packUp(data,index){

for (let i = 0, len = data.length; i len; i++) {//其他最外層列表變?yōu)殛P(guān)閉狀態(tài)

if(index!=i){

data[i].show = false;

for (let j=0;jdata[i].item.length;j++){//其他所有內(nèi)層也為關(guān)閉狀態(tài)

data[i].item[j].show=false;

}

}

}

},

onLoad: function (options) {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow: function () {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面隱藏

*/

onHide: function () {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面卸載

*/

onUnload: function () {

},

/**

* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作

*/

onPullDownRefresh: function () {

},

/**

* 頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom: function () {

},

/**

* 用戶點(diǎn)擊右上角分享

*/

onShareAppMessage: function () {

}})

作者:

鏈接:

來源:慕課網(wǎng)

本文原創(chuàng)發(fā)布于慕課網(wǎng) ,轉(zhuǎn)載請(qǐng)注明出處,謝謝合作

手機(jī)微信小程序怎么滿屏

關(guān)于手機(jī)微信小程序怎么滿屏這個(gè)問題我之前遇到過,挺容易解決的,接下來就跟大家講講應(yīng)該怎么操作:

工具:華為P50,HarmonyOS2.0.0,微信8.0.33

第一步,當(dāng)頁面彈出小窗口時(shí),點(diǎn)擊頁面空白處就可以變回全屏。(如下圖所示)

第二步,再進(jìn)入手機(jī)設(shè)置頁面,點(diǎn)擊輔助功能。(如下圖所示)

第三步,進(jìn)入輔助功能頁面,點(diǎn)擊單手模式。(如下圖所示)

第四步,進(jìn)入單手模式頁面,把單手模式關(guān)閉即可。(如下圖所示)

以上就是解決手機(jī)微信小程序怎么滿屏的所有步驟啦,對(duì)你有用的話記得幫忙點(diǎn)贊點(diǎn)關(guān)注呀~? ?

微信小程序折疊面板的介紹就聊到這里吧,感謝你花時(shí)間閱讀本站內(nèi)容,更多關(guān)于小程序疊放、微信小程序折疊面板的信息別忘了在本站進(jìn)行查找喔。

掃描二維碼推送至手機(jī)訪問。

版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。

本文鏈接:http://m.landcheck.net/post/15052.html

“微信小程序折疊面板(小程序疊放)” 的相關(guān)文章

蘇州軟件開發(fā)(蘇州軟件開發(fā)實(shí)力派)

蘇州軟件開發(fā)(蘇州軟件開發(fā)實(shí)力派)

今天給各位分享蘇州軟件開發(fā)的知識(shí),其中也會(huì)對(duì)蘇州軟件開發(fā)實(shí)力派進(jìn)行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧!本文目錄一覽: 1、選擇蘇州點(diǎn)邁軟件開發(fā)公司的十大理由! 2、合合信息蘇州軟件開發(fā)怎么樣 3、蘇州APP開發(fā)公司哪家好 4、蘇州匯成軟件開發(fā)科技有限公司怎么...

國(guó)家中小學(xué)資源教育平臺(tái)課程網(wǎng)盤(國(guó)家中小學(xué)課程資源百度云)

國(guó)家中小學(xué)資源教育平臺(tái)課程網(wǎng)盤(國(guó)家中小學(xué)課程資源百度云)

本篇文章給大家談?wù)剣?guó)家中小學(xué)資源教育平臺(tái)課程網(wǎng)盤,以及國(guó)家中小學(xué)課程資源百度云對(duì)應(yīng)的知識(shí)點(diǎn),希望對(duì)各位有所幫助,不要忘了收藏本站喔。 本文目錄一覽: 1、國(guó)家中小學(xué)教育云平臺(tái)里面的免費(fèi)課程數(shù)學(xué)怎么沒有青島版的呀 2、中小學(xué)生網(wǎng)絡(luò)云平臺(tái)學(xué)生資源在哪 3、國(guó)家教育資源平臺(tái)怎么下載視頻 國(guó)家中小...

手機(jī)怎么創(chuàng)建html文件(手機(jī)上如何編寫html)

手機(jī)怎么創(chuàng)建html文件(手機(jī)上如何編寫html)

本篇文章給大家談?wù)勈謾C(jī)怎么創(chuàng)建html文件,以及手機(jī)上如何編寫html對(duì)應(yīng)的知識(shí)點(diǎn),希望對(duì)各位有所幫助,不要忘了收藏本站喔。 本文目錄一覽: 1、手機(jī)有沒有可能制作html格式文件 2、手機(jī)怎么打開html文件 3、html文件在安卓手機(jī)上怎么打開? 4、智能手機(jī)怎么創(chuàng)建.html文件...

交易平臺(tái)凍結(jié)資金讓充錢解凍怎么舉報(bào)(交易平臺(tái)資金凍結(jié)了需要充錢解凍嗎)

交易平臺(tái)凍結(jié)資金讓充錢解凍怎么舉報(bào)(交易平臺(tái)資金凍結(jié)了需要充錢解凍嗎)

今天給各位分享交易平臺(tái)凍結(jié)資金讓充錢解凍怎么舉報(bào)的知識(shí),其中也會(huì)對(duì)交易平臺(tái)資金凍結(jié)了需要充錢解凍嗎進(jìn)行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧!本文目錄一覽: 1、游戲平臺(tái)把我的資金凍結(jié)了,要求我給他們打500過去才能解凍,不然會(huì)被永久凍結(jié),該怎么辦,錢還能拿回 2、我在...

webview打不開網(wǎng)頁可能是什么問題(webview組件安裝異常)

webview打不開網(wǎng)頁可能是什么問題(webview組件安裝異常)

今天給各位分享webview打不開網(wǎng)頁可能是什么問題的知識(shí),其中也會(huì)對(duì)webview組件安裝異常進(jìn)行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧!本文目錄一覽: 1、WebView篇—— 加載Web頁面空白原因 2、WebView加載不出來,顯示空白頁面 3、WKWebV...

中臺(tái)架構(gòu)與實(shí)現(xiàn)(中臺(tái)架構(gòu)與實(shí)現(xiàn)基于DDD和微服務(wù))

中臺(tái)架構(gòu)與實(shí)現(xiàn)(中臺(tái)架構(gòu)與實(shí)現(xiàn)基于DDD和微服務(wù))

今天給各位分享中臺(tái)架構(gòu)與實(shí)現(xiàn)的知識(shí),其中也會(huì)對(duì)中臺(tái)架構(gòu)與實(shí)現(xiàn)基于DDD和微服務(wù)進(jìn)行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧!本文目錄一覽: 1、中臺(tái)是什么意思 2、數(shù)據(jù)中臺(tái)有什么好處? 3、業(yè)務(wù)中臺(tái)和數(shù)據(jù)中臺(tái)有什么關(guān)系? 4、百勝軟件E3全渠道中臺(tái)采用的什么底層架...