2、省略时，显示 展开/收起 按钮

3、文本不超过n行时，不显示省略号和展开/收起按钮

文本是否显示省略号，通过css可以实现；

判断是否显示展开/收起按钮；

通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可；

wx.createSelectorQuery() ：返回一个 SelectorQuery 对象实例。

SelectorQuery.exec(function callback) ：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

NodesRef.boundingClientRect(function callback) ：添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

js

wxss

看到一个需求，对一些前端小白或者刚开始写小程序的人来说，可能会有点帮助，效果如下：

就是以上效果，废话不多说，上代码

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.lengthileni++ ){

if(i!=Index){

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

}

}

}

this.setData({list})

},

//让所有的展开项，都变为收起

packUp(data,index){

for (let i = 0, len = data.lengthi leni++) {//其他最外层列表变为关闭状态

if(index!=i){

data[i].show = false

for (let j=0jdata[i].item.lengthj++){//其他所有内层也为关闭状态

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

}

}

}

},

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}})

作者：

链接：https://www.imooc.com/article/30662

来源：慕课网

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

第一步，打开手机并在桌面找到微信图标，进入登陆页面后，输入账号密码，点击登陆并进入主页后，向下滑动手机屏幕。

2. 第二步，滑动即可显示小程序页面。

3. 方法2：

第一步，打开手机中的微信应用，进入主页后，点击右下角的我选项。

4. 第二步，点击个人页面下方的设置选项。

5.第三步，进入设置页面后，在下方找到通用选项，点击打开。

6. 第四步，切换至通用页面后，点击下方的发现页管理选项。

7. 第五步，进入发现页管理页面后，点击下方小程序右侧的开关，将其打开。

8. 第六步，回到微信并打开发现页面，在其中就可以看到小程序选项，点击进入。

9. 第七步，点击即可跳转至小程序列表页面，该选项即为小程序的固定入口。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://outofmemory.cn/yw/7735817.html