从零入门到上手开发微信小程序教程之文章详情页UI设计
今天晚上写完了《阿涛技术博客》文章详情页的制作,话不多说,先上文章详情页的效果图.
文章详情页
页面结构很简单,头部采用自定义导航形式,胶囊按钮,
使用ColorUI 胶囊按钮代码:
<cu-custom isCustom="{{true}}">
</cu-custom>然后做了一个页面效果,当文章页面向上滚动到一定距离,就会显示该篇文章的标题.然后页面底部做了一个短评功能,和点赞功能.
滚动到一定位置时显示文章标题,返回顶部隐藏
这个效果我是在一个微信小程序上看到的,觉得很不错,于是就是网上搜索实现这种效果的方法,结果,还真找到了,代码很简单,
<view class="{{scrollY>200 ? 'topnav' : ''}}">
<text style='color:#fff;'>Excel2017实用技巧之Vlookup的应用</text>
</view>
文章短评功能
文章短评功能
点赞功能
写在最后,给自己设定一个个人微信小程序的小目标,一步一步去实现它.
