微信小程序折疊面板（小程序疊放）
本篇文章給大家談?wù)勎⑿判〕绦蛘郫B面板，以及小程序疊放對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
- 1、電腦上使用微信小程序,電腦怎么翻頁(yè)
- 2、詳解mpvue中使用vant時(shí)需要注意的onChange事件的坑
- 3、微信小程序怎么實(shí)現(xiàn)內(nèi)容的展開(kāi)和收起？
- 4、手機(jī)微信小程序怎么滿屏
電腦上使用微信小程序,電腦怎么翻頁(yè)
首先電腦打開(kāi)并登錄微信。
左側(cè)點(diǎn)擊小程序面板按鈕；其中包含最近使用和我的小程序，點(diǎn)擊向下三角可顯示更多；打開(kāi)并進(jìn)入小程序鼠標(biāo)點(diǎn)擊進(jìn)行使用即可；需要關(guān)閉退出小程序，點(diǎn)擊右上角按鈕。
微信小程序，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。全面開(kāi)放申請(qǐng)后，主體類(lèi)型為企業(yè)、政府、媒體、其他組織或個(gè)人的開(kāi)發(fā)者，均可申請(qǐng)注冊(cè)小程序。微信小程序、微信訂閱號(hào)、微信服務(wù)號(hào)、微信企業(yè)號(hào)是并行的體系。
詳解mpvue中使用vant時(shí)需要注意的onChange事件的坑
最近用了一下Vant
Weapp組件庫(kù)，但是由于我是用mpvue寫(xiě)的，所以自然跟小程序引用不一樣，比如我最近引用了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.通過(guò)value控制展開(kāi)的面板列表，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)銷(xiāo)、一機(jī)多種收款，告別經(jīng)營(yíng)低效和客戶流失
/van-collapse-item
van-collapse-item
title="有贊美業(yè)"
name="3"
disabled
線上拓客，隨時(shí)預(yù)約，貼心順手的開(kāi)單收銀
/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)銷(xiāo)、一機(jī)多種收款，告別經(jīng)營(yíng)低效和客戶流失
/van-collapse-item
van-collapse-item
title="有贊美業(yè)"
name="3"
disabled
線上拓客，隨時(shí)預(yù)約，貼心順手的開(kāi)單收銀
/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)聽(tīng)
在van-collapse組件里加個(gè)監(jiān)聽(tīng)事件
@change="onChange($event)"
mpvue中獲取event值也與原生小程序有所不同：
onChange(event){
//
獲取表單組件filed的值
console.log(event.mp.detail)
//
注意加入mp
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目mpvue+vant
app搭建微信小程序的方法步驟
微信小程序怎么實(shí)現(xiàn)內(nèi)容的展開(kāi)和收起？
看到一個(gè)需求，對(duì)一些前端小白或者剛開(kāi)始寫(xiě)小程序的人來(lái)說(shuō)，可能會(huì)有點(diǎn)幫助，效果如下：
就是以上效果，廢話不多說(shuō)，上代碼
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({
/**
* 頁(yè)面的初始數(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)擊最外層列表展開(kāi)收起
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;//變換其打開(kāi)、關(guān)閉的狀態(tài)
if (list[Index].show){//如果點(diǎn)擊后是展開(kāi)狀態(tài)，則讓其他已經(jīng)展開(kāi)的列表變?yōu)槭掌馉顟B(tài)
this.packUp(list,Index);
}
this.setData({
list ? ?});
},
//點(diǎn)擊里面的子列表展開(kāi)收起
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;//變換其打開(kāi)、關(guān)閉的狀態(tài)
if (list[parentindex].item[Index].show){//如果是操作的打開(kāi)狀態(tài)，那么就讓同級(jí)的其他列表變?yōu)殛P(guān)閉狀態(tài)，保持始終只有一個(gè)打開(kāi)
for (let i = 0, len = list[parentindex].item.length;ilen;i++ ){
if(i!=Index){
list[parentindex].item[i].show=false;
}
}
}
this.setData({list});
},
//讓所有的展開(kāi)項(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)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}})
作者：
鏈接：
來(lái)源：慕課網(wǎng)
本文原創(chuàng)發(fā)布于慕課網(wǎng) ，轉(zhuǎn)載請(qǐng)注明出處，謝謝合作
手機(jī)微信小程序怎么滿屏
關(guān)于手機(jī)微信小程序怎么滿屏這個(gè)問(wèn)題我之前遇到過(guò)，挺容易解決的，接下來(lái)就跟大家講講應(yīng)該怎么操作：
工具：華為P50,HarmonyOS2.0.0,微信8.0.33
第一步，當(dāng)頁(yè)面彈出小窗口時(shí)，點(diǎn)擊頁(yè)面空白處就可以變回全屏。（如下圖所示）
第二步，再進(jìn)入手機(jī)設(shè)置頁(yè)面，點(diǎn)擊輔助功能。（如下圖所示）
第三步，進(jìn)入輔助功能頁(yè)面，點(diǎn)擊單手模式。（如下圖所示）
第四步，進(jìn)入單手模式頁(yè)面，把單手模式關(guān)閉即可。（如下圖所示）
以上就是解決手機(jī)微信小程序怎么滿屏的所有步驟啦，對(duì)你有用的話記得幫忙點(diǎn)贊點(diǎn)關(guān)注呀~? ?
微信小程序折疊面板的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于小程序疊放、微信小程序折疊面板的信息別忘了在本站進(jìn)行查找喔。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
