投稿
  1. 首页
  2. CMS教程

微信小程序怎么实现内容的展开和收起

严伟 • 2023-5-1 • CMS教程 • 阅读 6

微信小程序怎么实现内容的展开和收起,第1张

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

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

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'>{{parentItemlistName}}</text>

<image src='/img/downpng' class='icon_down {{parentItemshow&&"icon_down_rotate"}}'></image>

</view>

<view class='list_item_box' wx:if='{{parentItemshow}}'>

<view class='list_item' wx:for='{{parentItemitem}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}'  data-parentindex='{{parentIndex}}'>

<view class='list_item_name_box'>

<text class='list_item_name'>{{itemitemName}}</text>

<image src='/img/downpng' class='icon_down {{itemshow&&"icon_down_rotate"}}'></image>

</view>

<view class='other_box' wx:if='{{itemshow}}'>

<view class='other'>

<text class='other_title'>内容：</text>

<text class='other_text'>{{itemcontent}}</text>

</view>

<view class='other'>

<text class='other_title'>时间：</text>

<text class='other_text'>{{itemtime}}</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  03s;}/ list_item_box{

height: 0;

transition:height  03s;

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/domejsPage({

/

页面的初始数据

/

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){

consolelog('触发了最外层');

let Index = ecurrentTargetdatasetparentindex,//获取点击的下标值

list=thisdatalist;

list[Index]show = !list[Index]show || false;//变换其打开、关闭的状态

if (list[Index]show){//如果点击后是展开状态，则让其他已经展开的列表变为收起状态

thispackUp(list,Index);

}

thissetData({

list    });

},

//点击里面的子列表展开收起

listItemTap(e){

let parentindex = ecurrentTargetdatasetparentindex,//点击的内层所在的最外层列表下标

Index=ecurrentTargetdatasetindex,//点击的内层下标

list=thisdatalist;

consolelog(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]itemlength;i<len;i++ ){

if(i!=Index){

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

}

}

}

thissetData({list});

},

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

packUp(data,index){

for (let i = 0, len = datalength; i < len; i++) {//其他最外层列表变为关闭状态

if(index!=i){

data[i]show = false;

for (let j=0;j<data[i]itemlength;j++){//其他所有内层也为关闭状态

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

}

}

}

},

onLoad: function (options) {

},

/

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

/

onReady: function () {

},

/

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

/

onShow: function () {

},

/

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

/

onHide: function () {

},

/

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

/

onUnload: function () {

},

/

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

/

onPullDownRefresh: function () {

},

/

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

/

onReachBottom: function () {

},

/

用户点击右上角分享

/

onShareAppMessage: function () {

}})

作者：

链接：>

直接使用阿里巴巴的网络路径

选择iconfont图标

官网：阿里巴巴矢量字体库

步骤：阿里巴巴字体库使用方法

全局引入appwxss

12345678910111213141516171819202122232425262728293031323334@font-face { font-family: 'iconfont'; / project id 518032 / src: url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmieot'); src: url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmieot#iefix') format('embedded-opentype'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmiwoff') format('woff'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmittf') format('truetype'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmisvg#iconfont') format('svg');}iconfont { font-family:"iconfont" !important; font-size:60rpx; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/本项目使用的18个图标 /icon-zhiding:before{content: '\e739';}icon-zuojiantou:before{content: '\e736';}icon-youjiantou:before{content: '\e735';}icon-shangjiantou:before{content: '\e734';}icon-xiajiantou1:before{content: '\e733';}icon-xiajiantou:before{content: '\e6cc';}icon-gengduotianchong:before{content: '\e67f';}icon-erweima:before{content: '\e65f';}icon-fenleiorguangchangorqita:before{content: '\e64f';}icon-dibiao:before{content: '\e64d';}icon-bangzhu:before{content: '\e64a';}icon-xinfeng:before{content: '\e640';}icon-duihuaxinxi:before{content: '\e639';}icon-sousuo:before{content: '\e62f';}icon-shouye:before{content: '\e62d';}icon-shezhi:before{content: '\e62a';}icon-shanchu:before{content: '\e629';}icon-dianhua:before{content: '\e61b';}

使用图标

123456789101112131415161718192021222324<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon></view><view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon></view><view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon></view>

效果图

注意：此处实现采用的是无APPID的开发模式，实际应用应该在微信小程序管理平台的开发设置中配置合法域名。

下载到本地

步骤

字体文件转化成base64格式

解压压缩包 —- 找到ttf格式文件 —- 上传到平台转化为base64格式 —- 下载压缩包 —- 将css文件名改为wxss —- 放入项目文件夹 —- 用@import全局引入 —- 使用

使用—-引入及全局定义

123456789101112131415161718192021222324@import "src/css/iconwxss";iconfont { font-family: "iconfont"; font-size:60rpx;}/本项目使用的18个图标 /icon-zhiding:before{content: '\e739';}icon-zuojiantou:before{content: '\e736';}icon-youjiantou:before{content: '\e735';}icon-shangjiantou:before{content: '\e734';}icon-xiajiantou1:before{content: '\e733';}icon-xiajiantou:before{content: '\e6cc';}icon-gengduotianchong:before{content: '\e67f';}icon-erweima:before{content: '\e65f';}icon-fenleiorguangchangorqita:before{content: '\e64f';}icon-dibiao:before{content: '\e64d';}icon-bangzhu:before{content: '\e64a';}icon-xinfeng:before{content: '\e640';}icon-duihuaxinxi:before{content: '\e639';}icon-sousuo:before{content: '\e62f';}icon-shouye:before{content: '\e62d';}icon-shezhi:before{content: '\e62a';}icon-shanchu:before{content: '\e629';}icon-dianhua:before{content: '\e61b';}

开发使用

123456789101112131415161718192021222324<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon></view><view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon></view><view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon></view>

效果图

appjson文件面看自tabBar写

"tabBar":{

"selectedColor": "#3cc51f",

"list":[{

"pagePath":"pages/index/index",

"iconPath":"images/icon_homepng",

"selectedIconPath":"images/icon_home_selectedpng",

"text":"主页"

},{

"pagePath":"pages/car/index",

"iconPath":"images/icon_homepng",

"selectedIconPath":"images/icon_home_selectedpng",

"text":"购物车"

},{

"pagePath":"pages/member/index/index",

"iconPath":"images/icon_memberpng",

"selectedIconPath":"images/icon_member_selectedpng",

"text":"员"

},{

"pagePath":"pages/store/index/index",

"iconPath":"images/20170811112822png",

"selectedIconPath":"images/20170811113017png",

"text":"商家"

}]

}

我知道设置5少没留意 能设置太少吧 设置几试试

iconList是你在js中data定义的一个数组么？问题请详细描述下。

iconListpush（）// 为数组添加元素的内容

thissetData({

    iconList: iconList

})

以上就是关于微信小程序怎么实现内容的展开和收起全部的内容，包括:微信小程序怎么实现内容的展开和收起、微信小程序 如何引入外部字体库iconfont的、微信小程序设置地图组件的covers的iconPath属性怎么设置都无效等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

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

原文地址: http://outofmemory.cn/zz/9753943.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
严伟 严伟 一级用户组
0 0
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表（0条）

保存