微信小程序展开（微信小程序展开和收起列表）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
今天给各位分享微信小程序展开的知识，其中也会对微信小程序展开和收起列表进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、微信小程序怎么实现内容的展开和收起？
- 2、微信小程序中，用什么可以在WXML展开一个数组列表
- 3、小程序怎么展开粘贴权限
- 4、华为平板怎么打开微信小程序功能
- 5、手机微信没有小程序在哪里打开
- 6、微信小程序文本展开、收起功能
微信小程序怎么实现内容的展开和收起？
看到一个需求，对一些前端小白或者刚开始写小程序的人来说，可能会有点帮助，效果如下：
就是以上效果，废话不多说，上代码
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 () {
}})
作者：
链接：
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作
微信小程序中，用什么可以在WXML展开一个数组列表
做一个查询的功能 可以根据id查到text 或者根据text查到id
附上数组如下
resultset: [{id:1,text:"aaa"},{id:2,text:"bbb"}, {id: 3,text: 'ccc'}, {id: 4,text: 'f'}]
之前尝试了一些方法 就像在传统语言那样遍历数组然后寻找相等的值 但是发现好像并不是特别好使
var resultSet =this.data.resultset
const length = resultSet.length var val = this.data.inputValue if(val){
console.log(val) for(let i =0;i=length;i++){ //console.log(resultSet[i])
if(val == resultSet[i].id){
console.lo("找到了") var result = this.data.resultSet[i].id
console.log("结果是"+result)
} else{
console.log("没找到结果")
}
}
} else{
console.log("没输入啊")
}
}
小程序怎么展开粘贴权限
从微信小程序界面，点击“...”后进入个人信息与权限管理，进入后点击一下小程序位置信息。从位置信息界面，选上“仅在使用小程序期间”即可成功操作。
华为平板怎么打开微信小程序功能
1. 方法1：
第一步，打开手机并在桌面找到微信图标，进入登陆页面后，输入账号密码，点击登陆并进入主页后，向下滑动手机屏幕。
2. 第二步，滑动即可显示小程序页面。
3. 方法2：
第一步，打开手机中的微信应用，进入主页后，点击右下角的我选项。
4. 第二步，点击个人页面下方的设置选项。
5.第三步，进入设置页面后，在下方找到通用选项，点击打开。
6. 第四步，切换至通用页面后，点击下方的发现页管理选项。
7. 第五步，进入发现页管理页面后，点击下方小程序右侧的开关，将其打开。
8. 第六步，回到微信并打开发现页面，在其中就可以看到小程序选项，点击进入。
9. 第七步，点击即可跳转至小程序列表页面，该选项即为小程序的固定入口。
手机微信没有小程序在哪里打开
若使用的是vivo手机，微信没有小程序，可查看以下方法：
1、将微信升级到最新版本；
2、使用微信搜索“小程序示例”，在搜索结果中点击“小程序示例”进入小程序展示界面，然后退出此界面，回到“发现”列表，即可看到最下方显示的小程序入口。
微信小程序文本展开、收起功能
1、文本超过n行显示省略号
2、省略时，显示 展开/收起 按钮
3、文本不超过n行时，不显示省略号和展开/收起按钮
文本是否显示省略号，通过css可以实现；
判断是否显示展开/收起按钮；
通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可；
wx.createSelectorQuery() ：返回一个 SelectorQuery 对象实例。
SelectorQuery.exec(function callback) ：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
NodesRef.boundingClientRect(function callback) ：添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。
js
wxss
微信小程序展开的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序展开和收起列表、微信小程序展开的信息别忘了在本站进行查找喔。
