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


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 相关文章推荐
基于JQuery的密码强度验证代码
Mar 01 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
Angular路由简单学习
Dec 26 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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实现中文转数字
2016/02/18 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
安全生产责任书范本
2014/04/15 职场文书
团日活动总结
2014/04/28 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
长城英文导游词
2015/01/30 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
详解Python中的for循环
2022/04/30 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers