微信小程序文章列表功能完整实例


Posted in Javascript onJune 03, 2020

本文实例讲述了微信小程序文章列表功能。分享给大家供大家参考,具体如下:

没有服务器接口数据的情况下玩一玩。

list.wxml

<view>
  <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000" easing-function="linear">
   <swiper-item><image src='/images/banner/2.jpg'></image></swiper-item>
   <swiper-item><image src='/images/banner/1.jpg'></image></swiper-item>  
  </swiper>
</view>
 
<block wx:for="{{articles}}" wx:for-item="item" wx:key="name" wx:for-index="idx">
<view class="list-article" catchtap="onPostTap" data-aid="{{idx}}">
 <view class="avatar">
  <image src="{{item.avatar_img}}"></image>
  <text>{{item.date}}</text>
 </view>
 <view class="description">
  <image src="{{item.des_img}}"></image>
  <text>{{item.description}}</text>
  <view class="article-post">
   <image src="/images/icon/none-star.png"></image>
   <text>{{item.posts}}</text>
   <image src="/images/icon/view.png"></image>
   <text>{{item.view}}</text>
  </view>
 </view>
</view>
</block>

list.wxss

/* pages/index/index.wxss */
.swiper{
 width: 100%;
 height: 500rpx;
}
body{
 background: black;
}
.swiper image{
 width: 100%;
 height: 500rpx;
}
.list-article{
 margin-top:20rpx;
}
.avatar{
 margin-bottom: 20rpx;
 overflow: hidden;
}
.avatar image{
  padding-left:20rpx;
  width:100rpx;
  height: 100rpx;
  float: left;
}
.avatar text{
 float: left;
 height: 100rpx;
 line-height: 100rpx;
 padding-left:20rpx;
 font-size:0.5rem;
}
 
.description image{
 width:100%;
 height: 300rpx;
}
list-article{
 flex-direction: column;
}
.description text{
 font-size:25rpx;
 letter-spacing: 2rpx;
 padding-top:20rpx;
 padding-left: 20rpx;
 line-height: 40rpx;
}
.article-post image{
 width: 30rpx;
 height: 30rpx;
 vertical-align: middle;
}
.article-post{
 flex-direction: row;
 margin-top:10rpx;
}
.article-post text{
 font-size: 20rpx;
 vertical-align: middle;
 margin-right: 10rpx;
}

index.json

{
 "navigationBarBackgroundColor": "#405f80",
 "navigationBarTitleText": "一点新闻"
}

list.js

// pages/index/index.js
var articleData = require("/../../data/article-data.js");
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.setData({ articles: articleData.data});
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 }
})

article-data.js

var data = [{
 aid:1,
 title: "希望",
 avatar:"鲁迅",
 avatar_img:"/images/avatar/1.png",
 date:"2019-09-29 星期日",
 des_img:"/images/post/sls.jpg",
 view:"100",
 posts:"112",
 description:"我大概老了。我的头发已经苍白,不是很明白的事么?我的手颤抖着,不是很明白的事么?那么我的灵魂的手一定也颤抖着,头发也一定苍白了。",
 content:"我的心分外地寂寞。 然而我的心很平安;没有爱憎,没有哀乐,也没有颜色和声音。 我大概老了。我的头发已经苍白,不是很明白的事么?我的手颤抖着,不是很明白的事么?那么我的灵魂的手一定也颤抖着,头发也一定苍白了。 然而这是许多年前的事了。 这以前,我的心也曾充满过血腥的歌声:血和铁,火焰和毒,恢复和报仇。而忽然这些都空虚了,但有时故意地填以没奈何的自欺的希望。希望,希望,用这希望的盾,抗拒那空虚中的暗夜的袭来,虽然盾后面也依然是空虚中的暗夜。然而就是如此,陆续地耗尽了我的青春。 我早先岂不知我的青春已经逝去?但以为身外的青春固在:星,月光,僵坠的蝴蝶,暗中的花,猫头鹰的不祥之言,杜鹃的啼血,笑的渺茫,爱的翔舞。……虽然是悲凉漂渺的青春罢,然而究竟是青春。 然而现在何以如此寂寞?难道连身外的青春也都逝去,世上的青年也多衰老了么? 我只得由我来肉薄这空虚中的暗夜了。我放下了希望之盾,我听到Petofi Sandor (1823-49)的“希望”之歌: 希望是什么?是娼妓: 她对谁都蛊惑,将一切都献给; 待你牺牲了极多的宝贝—— 你的青春——她就抛弃你。 这伟大的抒情诗人,匈牙利的爱国者,为了祖国而死在可萨克兵的矛尖上,已经七十五年了。悲哉死也,然而更可悲的是他的诗至今没有死。 但是,可惨的人生!桀骜英勇如Petofi,也终于对了暗夜止步,回顾茫茫的东方了。他说: 绝望之为虚妄,正与希望相同。 倘使我还得偷生在不明不暗的这“虚妄”中,我就还要寻求那逝去的悲凉漂渺的青春,但不妨在我的身外。因为身外的青春倘一消灭,我身中的迟暮也即凋零了。 然而现在没有星和月光,没有僵坠的蝴蝶以至笑的渺茫,爱的翔舞。然而青年们很平安。 我只得由我来肉薄这空虚中的暗夜了,纵使寻不到身外的青春,也总得自己来一掷我身中的迟暮。但暗夜又在那里呢?现在没有星,没有月光以至没有笑的渺茫和爱的翔舞;青年们很平安,而我的面前又竟至于并且没有真的暗夜。 绝望之为虚妄,正与希望相同!"
}];
 
module.exports = {
 data: data
}

module.exports 对象是由模块系统创建的。在我们自己写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴露什么内容,module.exports 提供了暴露接口的方法。

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
轮播的简单实现方法
Jul 28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
JavaScript实现切换多张图片
Jan 27 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
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 #Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 #Javascript
You might like
PHP与SQL注入攻击[一]
2007/04/17 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
Add a Table to a Word Document
2007/06/15 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JavaScript中this详解
2015/09/01 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
介绍一下XMLHttpRequest对象
2012/02/12 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
城管大队整治方案
2014/05/06 职场文书
局火灾防控工作方案
2014/05/25 职场文书
市场营销毕业求职信
2014/08/07 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android