微信小程序折疊面板（小程序疊放）
本篇文章給大家談談微信小程序折疊面板，以及小程序疊放對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
電腦上使用微信小程序,電腦怎么翻頁
首先電腦打開并登錄微信。
左側點擊小程序面板按鈕；其中包含最近使用和我的小程序，點擊向下三角可顯示更多；打開并進入小程序鼠標點擊進行使用即可；需要關閉退出小程序，點擊右上角按鈕。
微信小程序，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。全面開放申請后，主體類型為企業(yè)、政府、媒體、其他組織或個人的開發(fā)者，均可申請注冊小程序。微信小程序、微信訂閱號、微信服務號、微信企業(yè)號是并行的體系。
詳解mpvue中使用vant時需要注意的onChange事件的坑
最近用了一下Vant
Weapp組件庫，但是由于我是用mpvue寫的，所以自然跟小程序引用不一樣，比如我最近引用了vant里面的collapse折疊面板，官網文檔里面介紹的使用方法是這樣的
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為數組格式
van-collapse
value="{{
activeNames
}}"
van-collapse-item
title="有贊微商城"
name="1"
提供多樣店鋪模板，快速搭建網上商城
/van-collapse-item
van-collapse-item
title="有贊零售"
name="2"
網店吸粉獲客、會員分層營銷、一機多種收款，告別經營低效和客戶流失
/van-collapse-item
van-collapse-item
title="有贊美業(yè)"
name="3"
disabled
線上拓客，隨時預約，貼心順手的開單收銀
/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"
提供多樣店鋪模板，快速搭建網上商城
/van-collapse-item
van-collapse-item
title="有贊零售"
name="2"
網店吸粉獲客、會員分層營銷、一機多種收款，告別經營低效和客戶流失
/van-collapse-item
van-collapse-item
title="有贊美業(yè)"
name="3"
disabled
線上拓客，隨時預約，貼心順手的開單收銀
/van-collapse-item
/van-collapse
export
default
{
data
()
{
return
{
activeName:
'1'
}
},
methods:
{
onChange
(event)
{
console.log(event)
this.activeName
=
event.mp.detail
}
}
}
得把原生小程序使用方式為改為mpvue
使用方式
首先是數據綁定方式
value="{{activeNames}}"
改為
v-bind:value="activeNames"
//或者
:value="activeNames"
然后是事件監(jiān)聽
在van-collapse組件里加個監(jiān)聽事件
@change="onChange($event)"
mpvue中獲取event值也與原生小程序有所不同：
onChange(event){
//
獲取表單組件filed的值
console.log(event.mp.detail)
//
注意加入mp
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:詳解如何搭建mpvue框架搭配vant組件庫的小程序項目mpvue+vant
app搭建微信小程序的方法步驟
微信小程序怎么實現內容的展開和收起？
看到一個需求，對一些前端小白或者剛開始寫小程序的人來說，可能會有點幫助，效果如下：
就是以上效果，廢話不多說，上代碼
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'內容：/text
text class='other_text'{{item.content}}/text
/view
view class='other'
text class='other_title'時間：/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({
/**
* 頁面的初始數據
*/
data: {
list:[
{listName:'列表1',
item:[{
itemName:'子列表1-1',
content:'1-1中的內容',
time: '2015-05-06'
}, {
itemName: '子列表1-2',
content: '1-2中的內容',
time: '2015-04-13'
}, {
itemName: '子列表1-3',
content: '1-3中的內容',
time: '2015-12-06'
}]
},
{
listName: '列表2',
item: [{
itemName: '子列表2-1',
content: '2-1中的內容',
time: '2017-05-06'
}, {
itemName: '子列表2-2',
content: '2-2中的內容',
time: '2015-08-06'
}, {
itemName: '子列表2-3',
content: '2-3中的內容',
time: '2015-11-06'
}]
}, {
listName: '列表3',
item: [{
itemName: '子列表3-1',
content: '3-1中的內容',
time: '2015-05-15'
}, {
itemName: '子列表3-2',
content: '3-2中的內容',
time: '2015-05-24'
}, {
itemName: '子列表1-3',
content: '3-3中的內容',
time: '2015-05-30'
}]
}
]
},
//點擊最外層列表展開收起
listTap(e){
console.log('觸發(fā)了最外層');
let Index = e.currentTarget.dataset.parentindex,//獲取點擊的下標值
list=this.data.list;
list[Index].show = !list[Index].show || false;//變換其打開、關閉的狀態(tài)
if (list[Index].show){//如果點擊后是展開狀態(tài)，則讓其他已經展開的列表變?yōu)槭掌馉顟B(tài)
this.packUp(list,Index);
}
this.setData({
list ? ?});
},
//點擊里面的子列表展開收起
listItemTap(e){
let parentindex = e.currentTarget.dataset.parentindex,//點擊的內層所在的最外層列表下標
Index=e.currentTarget.dataset.index,//點擊的內層下標
list=this.data.list;
console.log(list[parentindex].item,Index);
list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//變換其打開、關閉的狀態(tài)
if (list[parentindex].item[Index].show){//如果是操作的打開狀態(tài)，那么就讓同級的其他列表變?yōu)殛P閉狀態(tài)，保持始終只有一個打開
for (let i = 0, len = list[parentindex].item.length;ilen;i++ ){
if(i!=Index){
list[parentindex].item[i].show=false;
}
}
}
this.setData({list});
},
//讓所有的展開項，都變?yōu)槭掌?/p>
packUp(data,index){
for (let i = 0, len = data.length; i len; i++) {//其他最外層列表變?yōu)殛P閉狀態(tài)
if(index!=i){
data[i].show = false;
for (let j=0;jdata[i].item.length;j++){//其他所有內層也為關閉狀態(tài)
data[i].item[j].show=false;
}
}
}
},
onLoad: function (options) {
},
/**
* 生命周期函數--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}})
作者：
鏈接：
來源：慕課網
本文原創(chuàng)發(fā)布于慕課網 ，轉載請注明出處，謝謝合作
手機微信小程序怎么滿屏
關于手機微信小程序怎么滿屏這個問題我之前遇到過，挺容易解決的，接下來就跟大家講講應該怎么操作：
工具：華為P50,HarmonyOS2.0.0,微信8.0.33
第一步，當頁面彈出小窗口時，點擊頁面空白處就可以變回全屏。（如下圖所示）
第二步，再進入手機設置頁面，點擊輔助功能。（如下圖所示）
第三步，進入輔助功能頁面，點擊單手模式。（如下圖所示）
第四步，進入單手模式頁面，把單手模式關閉即可。（如下圖所示）
以上就是解決手機微信小程序怎么滿屏的所有步驟啦，對你有用的話記得幫忙點贊點關注呀~? ?
微信小程序折疊面板的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于小程序疊放、微信小程序折疊面板的信息別忘了在本站進行查找喔。
