/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var url = options.url; var content = options.content; var postType = options.type; var who = options.who; var date = options.date; var images = options.images.split(','); var imageArray = []; var hadImage = false ; for (var i = 0; i < images.length; i++) { // 图片不为空则存到数组中 if (images[i] != "undefined"){ var obj = { imageUrl: images[i], } imageArray.push(obj); } } // 是否有图片 if (imageArray.length > 0) { hadImage = true; } else { hadImage = false; } // 传递数据给ui显示 this.setData({ url: url, content: content, date: date, postType: postType, who: who, images: imageArray, hadImage: hadImage }) // 标题 wx.setNavigationBarTitle({ title: "文章详情" }) },
数据动态填充
通过判断语句动态判断控制图片显示的变量是否有值，有则显示图片组件，没有则不显示图片组件。
在 reading-detail.wxml 中通过判断语句判断是否显示图片组件, hadImage 是 js 中传递过来的值
复制代码 代码如下:
<image wx:if="{{hadImage}}" src="https://www.jb51.net/{{item.imageUrl}}" mode='widthFix'></image>
ok，查看文章详情功能到这里了（详情页最好是直接用 web-view 展示，但是个人开发不支持 web-view 组件）。