微信小程序文章详情页实现代码

先自己画了一张丑丑的原型图，然后开始在小程序上画页面，然后设计风格，一路总结，就是不知道去哪里查~

原型设计和分析

原型图效果

文章详情。巴布亚新几内亚

为什么要这样设计？

正常情况下，设计是先设计出来的，然后服务器会和我们讨论如何设计接口。然后，根据服务器返回的结果，我们将它显示在界面上。但是这里我们使用的是第三方界面，所以只能展示他所拥有的。

服务器接口返回的数据如下：

applet-服务器返回结果。

在分析json结果后，为了简单起见，我们只显示几个元素，即时间、标题、类型、作者和图片。

整体垂直排列，然后根据是否有返程动态显示图片，最后一个心形图标为收藏(收藏功能尚未实现)

原型实现

在实现过程中循序渐进的思考，首先是如何实现页面，然后是如何获取数据，最后是如何动态显示数据

页面实现

从原型图分析，我们的根布局需要能够整体垂直滑动，然后图片水平显示三行(后来实现的时候发现图片是水平显示的，图片太小不好看，所以改为整体垂直放置)

详细信息页面阅读的总体布局-detail.wxml

view view class=' top-text ' text web-view组件是一个容器，可用于承载网页，并自动扩展整个applet页面。个人和海外小程序暂时不支持。/text/View View class=' div line '/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 ' catch tap=' onimage click ' data-imageUrl=' { { item . imageUrl } } ' image wx 3: if=' { ' 而难点在于如何调整页面的风格(对我来说也是比较新的，比如我的小白条)

详细信息页面的样式文件wxss。scroller-container { height : 1300 rpx；}.top-text { font-size : 24 rpx；color: # 999左边距left: 20rpx右边距： 20 rpx；}.div line { background : # D1D1D 6；宽度： 100%；height: 2pxmargin: 20rpx}.内容-文本{ margin: 20rpxfont-size : 40 rpx；font-weight : 600 rpx；color: # 333}.图像容器{ display: flexflex-direction:柱；宽度： 100%；height: automargin: 20rpx}.图像项目{ width : 100%；高度： 600 rpx；填充-bottom : 20 rpx；}.类似视图的{ display: flexflex-direction : row；宽度： 100%；align-items:居中；justice-content : center；}.图标状{ width: 128rpxheight: 128rpx保证金-top : 20 rpx；}.type-text { margin-left : 10 rpx；font-size : 30 rpx；}.URL-text { margin-left : 10 rpx；font-size : 24 rpx；}.type-author { margin-left : 10 rpx；font-size : 30 rpx；}.type-date { margin-left : 10 rpx；font-size : 30 rpx；}心形图标居中过程中的align-items:居中；(横轴对齐)不显示在中心。检查后，需要将显示器设置为水平放置，然后需要设置alize-content :居中；(表示主轴上的对齐方式)下面是一篇介绍微信小程序布局基础的文章，微信小程序布局好

数据采购

通过上一页，它目前是以最简单的url值的形式传递的

单击reading.js文件中的事件传输数据

/** *项目的点击事件*/onganktap :函数(事件){ var URL=event。当前目标。数据集。邮政；var desc=事件。当前目标。数据集。desc邮报；var PostType=事件。当前目标。数据集。PostTypevar who=事件。当前目标。数据集。张贴谁；var date=事件。当前目标。数据集。发布日期；var images=事件。当前目标。数据集。后置仪表；wx。navigateto({ URL : ' reading-detail/reading-detail？url=' url '内容=' desc '类型=' postType '谁='谁'日期='日期'图像='图像}) },在阅读detail.js文件中接受传递过来的数据，并对数据处理

/** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ var URL=options . URL var content=options . content var PostType=options . TypeVar who=options . whovar date=options . datevar images=options . images . split('，')；var imageArray=[]；var hadImage=false for(var I=0；一。图像。长度；i ) { //图片不为空则存到数组中if (images[i]！=' undefined '){ var obj={ image URL : images[I]，} imagearray。推送(obj)；} } //是否有图片if(imagearray。长度0){ hadImage=true；} else { hadImage=false} //传递数据给用户界面显示this.setData({ url: url，content: content，date: date，postType: postType，who: who，images: imageArray，hadImage: hadImage }) //标题wx。setnavigationbartitle({ title : '文章详情' }) },数据动态填充

通过判断语句动态判断控制图片显示的变量是否有值，有则显示图片组件，没有则不显示图片组件。

在reading-detail.wxml中通过判断语句判断是否显示图片组件，hadImage是射流研究…中传递过来的值

复制代码代码如下：图像wx : if=' { { Hadimage } } ' class=' image-item ' src=' http : { { item }。imageurl } } '模式='宽度固定'/图像

好吧，查看文章详情功能到这里了（详情页最好是直接用网络视图展示，但是个人开发不支持网络视图组件)。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。