微信小程序文章详情功能完整实例


Posted in Javascript onJune 03, 2020

本文实例讲述了微信小程序文章详情功能。分享给大家供大家参考,具体如下:

接着上一篇

list.js  首先获取文章的id,因为我们的数据是假数据所以用key值作为文章id

onPostTap: function (event) {
  var article_id = event.currentTarget.dataset.aid;
  wx.navigateTo({
   url: '../article-detail/detail?aid=' + article_id,
  })
 },

detail.wxml

<!--pages/article-detail/detail.wxml-->
<view>
 <image src="/images/post/sls.jpg" class="detail-img"></image>
</view>
<view class="avatar">
 <image src="/images/avatar/2.png"></image>
 <text>{{detail.avatar}}</text>
 <text>发表于 {{detail.date}}</text>
 <image src="/images/icon/collection-anti.png"></image>
 <image src="/images/icon/share.png"></image>
</view>
<view class="title">
 <text>{{detail.title}}</text>
</view>
<view class="content">
{{detail.content}}
</view>
<view class="pre-next">
<text class="pre">上一篇:啊啊啊啊啊啊啊</text><text class="next">下一篇:哈哈哈哈哈</text>
</view>

detail.wxss

/* pages/article-detail/detail.wxss */
 
.detail-img {
 width: 100%;
 height: 400rpx;
}
 
.avatar {
 overflow: hidden;
}
 
.avatar image {
 float: left;
 width: 100rpx;
 height: 100rpx;
 margin-left: 20rpx;
}
 
.avatar image:nth-child(4) {
 float: right;
 width: 60rpx;
 height: 60rpx;
 margin-right: 20rpx;
}
 
.avatar image:nth-child(5) {
 float: right;
 width: 60rpx;
 height: 60rpx;
 vertical-align: middle;
}
 
.avatar text {
 float: left;
 font-size: 30rpx;
 height: 100rpx;
 line-height: 100rpx;
 padding-left: 15rpx;
}
 
.avatar text:nth-child(3) {
 font-size: 25rpx;
 color: gainsboro;
}
 
.title {
 width: 100%;
 clear: both;
}
 
.title text {
 display: flex;
 justify-content: center;
 align-items: center;
 color: rgb(171, 211, 224);
 font-size: 50rpx;
}
.content{
 color:#666;
 letter-spacing: 2rpx;
 margin-top:20rpx;
 padding-left:20rpx;
 padding-right:20rpx;
 line-height:40rpx;
 font-size:25rpx;
 text-indent:50rpx;
}
 
.pre-next{
 margin-top:20rpx;
}
.pre{
 float:left;
 margin-left:20rpx;
 font-size: 25rpx;
 color:rgb(171, 211, 224);
 padding-bottom: 20rpx;
}
 
.next{
 float: right;
 margin-right:20rpx;
 font-size: 25rpx;
 color:rgb(171, 211, 224);
 padding-bottom: 20rpx;
}

detail.js

// pages/article-detail/detail.js
var articleData = require("/../../data/article-data.js");
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
 
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  //获取文章的id
  var aid = options.aid;
  var article = articleData.data[aid];
  this.setData({detail:article});
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 }
})

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
Js 中debug方式
Feb 07 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
JS轮播图的实现方法2
Aug 25 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 #Javascript
微信小程序文章列表功能完整实例
Jun 03 #Javascript
Angular8 简单表单验证的实现示例
Jun 03 #Javascript
JS实现前端动态分页码代码实例
Jun 02 #Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 #Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 #Javascript
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
Python下载网络小说实例代码
2018/02/03 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
室内设计自我鉴定
2013/10/15 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
理解python中装饰器的作用
2021/07/21 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers