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


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 在firebug调试时用console.log的方法
May 10 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python with用法实例
2015/04/14 Python
python中异常捕获方法详解
2017/03/03 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
基于python检查矩阵计算结果
2020/05/21 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
三八妇女节活动总结
2014/05/04 职场文书
机关作风建设自查报告
2014/10/22 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
电工实训报告总结
2014/11/05 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
SQL基础的查询语句
2021/11/11 MySQL
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js