微信小程序文章详情页面实现代码微信小程序文章详情页面实现代码
主要介绍了微信小程序文章详情页面实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起
跟随小编过来看看吧
先自己绘制了一个丑陋的原型图,然后开始在小程序上绘制页面,然后设计样式,一路过来总结就是哪里不懂查哪里之旅~
原型设计和分析原型设计和分析
原型图效果
文章详情.png
为什么要这么设计?为什么要这么设计?
正常情况下是设计先出设计图,然后服务器和我们一同讨论接口如何设计,然后根据服务器返回的结果,我们再去界面上显
示。但是这里我们使用的是第三方的接口,所以只能他有什么我们显示什么了。
服务器接口返回的数据如下如:
小程序-服务器返回结果.png
分析 json 结果,我们这里为了简单,也就只显示几个元素分别是 时间,标题,类型,作者,图片 。
整体是垂直排列,然后图片是根据是否有返回来动态显示,最后的心形图标是为了收藏使用(目前还未实现收藏功能)
原型实现原型实现
在实现的过程中一步步思考,首先是页面如何实现,然后是数据如何获取,最后是如何动态显示数据
页面实现
从原型图分析,我们的根布局需要能够整体垂直滑动,然后图片水平显示三行(后来实现的时候发现水平显示图片,图片太小
不美观,故改成图片整体垂直摆放)
详情页面的整体布局详情页面的整体布局 reading-detail.wxml
<view>
<view class='top-text'>
<text>web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。</text>
</view>
<view class="divLine"></view>
<view>
<view class='content-text'>
<text>{{content}}</text>
</view>
<view class='image-container'>
<block wx:for="{{images}}" wx:for-item="item" wx:for-index="idx">
<view class='image-container' catchtap='onImageClick' data-imageUrl="{{item.imageUrl}}">
<image wx:if="{{hadImage}}" class='image-item' src="{{item.imageUrl}}" mode='widthFix'></image>
</view>
</block>
</view>
<view>
<text class='type-text'>类型:{{postType}}</text>
<text class='type-author'>作者:{{who}}</text>
</view>
<view><text class='type-date'>发布时间:{{date}}</text></view>
<view><text class='url-text'>网页链接:{{url}}</text></view>
<view class='view-like' catchtap='onLikeClick'>
<image class='icon-like' src='/images/detail/icon_like.png'></image>
</view>
</view>
</view>
布局还算好做的,难点就在于页面的样式如何去调整(难也是相对新手,比如我这种小白吧)
详情页面的样式文件详情页面的样式文件 wxss
.scroller-container{
height: 1300rpx;
}
.top-text{
评论0