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


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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
Vue路由权限控制解析
Nov 09 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP之短标签开启设置
2013/06/17 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python之import机制详解
2014/07/03 Python
python框架django基础指南
2016/09/08 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
如何真正的了解python装饰器
2020/08/14 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
广告传媒专业应届生求职信
2014/03/01 职场文书
公司新年寄语
2014/04/04 职场文书
岗位明星事迹材料
2014/05/18 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android