厂家网站怎么做,辅助设计软件有哪些,网站制作技术介绍,如何用电脑主机做网站需求实现支付宝类似的效果#xff1a; 思路#xff1a; 1.首先建立展开收起按钮#xff0c;这里使用的是uview里面的icon图标。 2.其次建立展开菜单内容#xff0c;这里只演示了文本信息#xff0c;后期引入首页应用。 3.最后写js逻辑#xff0c;展开收起时改变盒子高度和…需求实现支付宝类似的效果 思路 1.首先建立展开收起按钮这里使用的是uview里面的icon图标。 2.其次建立展开菜单内容这里只演示了文本信息后期引入首页应用。 3.最后写js逻辑展开收起时改变盒子高度和icon。
代码
1.视图层
view classheader-applicationview classrowOperateview classlefttext classleft-text首页应用/textu-icon :nameisMenuShow?arrow-up:arrow-down color#c6c6c6 size15 :boldtrueclickhandleShow/u-icon/viewview classrightu-button typeprimary color#027AFF sizemini :textoperateText/u-button/view/view!-- 首页菜单应用 --view classshow-more v-ifisMenuShow :class[isMenuShow ? showMenusBox : ]view第1行文字/viewview第2行文字/viewview第3行文字/viewview第4行文字/viewview第5行文字/view/view/view// 展开菜单.showMenusBox {height: 300px;margin: 15rpx 32rpx;}
2.逻辑层 handleShow() {this.isMenuShow !this.isMenuShow;}这样就大功告成了
