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


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 相关文章推荐
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
js检测用户输入密码强度
Oct 22 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
关于使用js算总价的问题
Jun 23 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
详解基于React.js和Node.js的SSR实现方案
Mar 21 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 strtr() 函数使用说明
2008/11/21 PHP
如何使用php输出时间格式
2013/08/31 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python断言assert的用法代码解析
2018/02/03 Python
Python装饰器用法实例总结
2018/02/07 Python
python安装教程
2018/02/28 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
python绘制雷达图实例讲解
2021/01/03 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
公司年会抽奖活动主持词
2014/03/31 职场文书
房展策划方案
2014/06/07 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
会议开幕词
2015/01/28 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript