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


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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
jQuery的三种$()
Dec 30 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
javaScript中的空值和假值
Dec 18 Javascript
React 组件间的通信示例
Jun 14 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php 调用远程url的六种方法小结
2009/11/02 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
matplotlib给子图添加图例的方法
2018/08/03 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
护士求职推荐信范文
2013/11/23 职场文书
法律专业推荐信范文
2013/11/29 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
我爱我校演讲稿
2014/05/21 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
springboot实现string转json json里面带数组
2022/06/16 Java/Android