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


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判断样式className同时增加class或删除class
Jan 30 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
Three.JS实现三维场景
Dec 30 Javascript
JavaScript实现图片轮播特效
Oct 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脚本的10个技巧(1)
2006/10/09 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python操作mysql数据库
2017/03/05 Python
python绘制立方体的方法
2018/07/02 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
思想品德自我评价
2014/02/04 职场文书
2014年新生军训方案
2014/05/01 职场文书
留学生求职信
2014/06/03 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
单位委托书
2014/10/15 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS