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


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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
JavaScript闭包详解
Feb 02 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
JS实现瀑布流布局
Oct 21 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 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中简单的对称加密算法实现
2017/01/05 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
python使用append合并两个数组的方法
2015/04/28 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
护理专业自荐信范文
2014/02/26 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
学习型班组申报材料
2014/05/31 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年终工作总结范本
2014/12/15 职场文书
网络研修心得体会
2016/01/08 职场文书
如何用python绘制雷达图
2021/04/24 Python
Python办公自动化解决world文件批量转换
2021/09/15 Python
Java spring定时任务详解
2021/10/05 Java/Android