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


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加解密功能页面
Dec 12 Javascript
JS版网站风格切换实例代码
Oct 06 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
vue.js实现照片放大功能
Jun 23 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如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
nodejs中方法和模块用法示例
2018/12/24 NodeJs
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python构造函数及解构函数介绍
2015/02/26 Python
Python中endswith()函数的基本使用
2015/04/07 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Django Highcharts制作图表
2016/08/27 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
学年末自我鉴定
2014/01/21 职场文书