uniapp 开发小程序展开更多与收缩的动画效果

效果图：

html

<view> <view >公告</view><view  @click="showMore"> {{isShow ? '收起∧':'查看更多∨'}} </view>
</view><!-- 更多弹框 -->
<view ><view class="show-more" :class="[isShow ? 'show-more-click' : '']"><view  v-if="isShowText">第1行文字</view><view  v-if="isShowText">第2行文字</view><view  v-if="isShowText">第3行文字</view><view  v-if="isShowText">第4行文字</view><view  v-if="isShowText">第5行文字</view><view  v-if="isShowText">第6行文字</view></view>
</view>

css

/* 点击更多的样式 */
.show-more{width:100%;height:2px;background-color: #4CD964;transition:height 1s;-moz-transition:height 1s; /* Firefox 4 */-webkit-transition:height 1s; /* Safari and Chrome */-o-transition:height 1s; /* Opera */
}
.show-more-click{height:300px;
}

showMore(){this.isShow = !this.isShowthis.isClick = !this.isClick// 先展开500毫秒后再显示文字,收缩200毫秒后再隐藏文字if(this.isShowText){setTimeout(()=>{this.isShowText = !this.isShowText},200)}else{setTimeout(()=>{this.isShowText = !this.isShowText},500)}}

uniapp 开发小程序展开更多与收缩的动画效果相关推荐

uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)
如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样. 解决措施: 在小程序中canvas层级过高,导致z-index也无法让弹窗置 ...
uniapp开发小程序，引入腾讯兔小巢插件，兔小巢页面导航头部样式错乱问题
uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发微信小程序,所有页面头部导航都是自定义的,引入腾讯兔 ...
uni-app开发小程序并运行起来(使用ColorUI)
uni-app开发小程序步骤详解最近接到一个项目开发一个小程序主要是早教的培训机构使用打算用uni-app来开发小程序到时候打包成小程序就可以了主要是用uni-app配合colorui使用 ...
uni-app开发小程序直播功能
uni-app开发小程序直播功能 1.微信后台申请插件开通 2.微信后台开通直播功能 3.代码中接入直播插件AppID 4.[直播组件]如何使用 5.直播组将状态获取微信开发直播功能,需要企业账号: ...
微信小程序 - 使用 uni-app 开发小程序以及部分功能实现
文章目录一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网 ...
uniapp开发小程序配置文件解析
文章目录前言 1.main.js 入口文件 2.App.vue 页面入口文件 2.1.应用生命周期 2.2.globalData 2.3.全局样式 3.pages.json 全局配置 3.1.pag ...
uni-app开发小程序以及项目部署流程
作者也是刚开始接触小程序开发,本次小程序开发使用的uni-app,记录下小程序的开发过程. 前期准备工作作者使用的开发工具:HBuilder x.微信开发者工具. 创建uni-app项目详细步骤可 ...
Uni-app开发小程序|基于微信小程序报修系统设计与实现
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .CSDN内容合伙人.掘金特邀作者.阿里云博客专家.51CTO特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Jav ...
Uniapp开发小程序引入微信快递跟踪（快递100）插件
目录 1.小程序插件接入 2.代码示例 3.页面接收参数 4.常用快递100公司编码表 1.小程序插件接入微信快递100插件地址:快递100-快递查询(免费接入) | 微信服务市场 (qq.com) ...

uniapp 开发小程序展开更多与收缩的动画效果

uniapp 开发小程序展开更多与收缩的动画效果相关推荐

最新文章

热门文章