微信小程序文章详情页面动态显示

Posted 让我再想想

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序文章详情页面动态显示相关的知识,希望对你有一定的参考价值。

文章详情页面动态显示(即点击某个文章就跳转到相应文章的详情页):
思路:在文章列表页面添加catchtop事件,在js文件中获取文章的index,并用wx.navigateTo中的
url拼接详情页的地址和文章的index,(在该操作之前该js应该已引入静态数据,在data中定义相应数据,
并更新数据,在详情页的js中也同样如上,详情看demo),列表页面事件添加完毕后,详情页需要接收数据
(index和文章内容),这就用到了,详情页的生命周期函数options来接收值.

 

为每个文章添加事件:

 

<block wx:for=\'{{listArr}}\' wx:key=\'{{index}}\'>
<view catchtap="toDetail" data-index=\'{{index}}\'>
<template is=\'listTmp\' data=\'{{...item}}\'/>
</view>
</block>

 

detail.wxml代码如下:

<!--pages/detail/detail.wxml-->
<view class="detailContainer">
<image class="headImg" src="{{detailObj.detail_img}}"></image>
<view class="avatar_date">
<image src="{{detailObj.avatar}}"></image>
<text>{{detailObj.author}}</text>
<text>发布于</text>
<text>{{detailObj.data}}</text>
</view>
<text class="company">{{detailObj.title}}</text>
<view class="collection_share_container">
<view class="collection_share">
<image src="/static/images/sc.png"></image>
<image src="/static/images/share2.png"></image>
</view>
<view class="line"></view>
</view>
<button>转发此文章</button>
<text class="content">{{detailObj.detail_content}}</text>
</view>

 

detail.js代码如下:

// pages/detail/detail.js
let datas=require(\'../data/list-data.js\');
console.log(datas);
Page({

/**
* 页面的初始数据
*/
data: {
datailObj:{},
index:null
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
//获取list页面传来的参数值
let index = options.index;
//更新data中的detailObj的状态值
this.setData({
detailObj:datas.list_data[index],
index //同名参数值可以省略不写(index:index)
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

 

 

以上是关于微信小程序文章详情页面动态显示的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序云开发个人博客项目实战(3)-- 文章的增删改查

微信小程序结合原生JS实现电商模板

微信小程序——动态修改页面数据及参数传递

微信小程序:swiper高度动态适配

微信小程序 |基于Flask框架实现智能菜谱小程序

微信小程序 项目实战list 列表页 及 item 详情页