微信小程序折叠面板（小程序叠放）
本篇文章给大家谈谈微信小程序折叠面板，以及小程序叠放对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
电脑上使用微信小程序,电脑怎么翻页
首先电脑打开并登录微信。
左侧点击小程序面板按钮；其中包含最近使用和我的小程序，点击向下三角可显示更多；打开并进入小程序鼠标点击进行使用即可；需要关闭退出小程序，点击右上角按钮。
微信小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。
详解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="有赞美业"
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="有赞美业"
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"
然后是事件监听
在van-collapse组件里加个监听事件
@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('触发了最外层');
let Index = e.currentTarget.dataset.parentindex,//获取点击的下标值
list=this.data.list;
list[Index].show = !list[Index].show || false;//变换其打开、关闭的状态
if (list[Index].show){//如果点击后是展开状态，则让其他已经展开的列表变为收起状态
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;//变换其打开、关闭的状态
if (list[parentindex].item[Index].show){//如果是操作的打开状态，那么就让同级的其他列表变为关闭状态，保持始终只有一个打开
for (let i = 0, len = list[parentindex].item.length;ilen;i++ ){
if(i!=Index){
list[parentindex].item[i].show=false;
}
}
}
this.setData({list});
},
//让所有的展开项，都变为收起
packUp(data,index){
for (let i = 0, len = data.length; i len; i++) {//其他最外层列表变为关闭状态
if(index!=i){
data[i].show = false;
for (let j=0;jdata[i].item.length;j++){//其他所有内层也为关闭状态
data[i].item[j].show=false;
}
}
}
},
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}})
作者：
链接：
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作
手机微信小程序怎么满屏
关于手机微信小程序怎么满屏这个问题我之前遇到过，挺容易解决的，接下来就跟大家讲讲应该怎么操作：
工具：华为P50,HarmonyOS2.0.0,微信8.0.33
第一步，当页面弹出小窗口时，点击页面空白处就可以变回全屏。（如下图所示）
第二步，再进入手机设置页面，点击辅助功能。（如下图所示）
第三步，进入辅助功能页面，点击单手模式。（如下图所示）
第四步，进入单手模式页面，把单手模式关闭即可。（如下图所示）
以上就是解决手机微信小程序怎么满屏的所有步骤啦，对你有用的话记得帮忙点赞点关注呀~
微信小程序折叠面板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序叠放、微信小程序折叠面板的信息别忘了在本站进行查找喔。
