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


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 相关文章推荐
JS删除数组元素的函数介绍
Mar 27 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python清空文件并替换内容的实例
2018/10/22 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
C#面试常见问题
2013/02/25 面试题
工作自荐信
2013/12/11 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
物业保安员岗位职责
2014/03/14 职场文书
高中生操行评语大全
2014/04/25 职场文书
高考标语大全
2014/06/05 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
vue组件vue-esign实现电子签名
2022/04/21 Vue.js