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


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 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python回调函数的使用方法
2014/01/23 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python挖矿算力测试程序详解
2019/07/03 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
jupyter 添加不同内核的操作
2021/02/06 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
销售经理工作职责范文
2013/12/03 职场文书
党员自我评价分享
2013/12/13 职场文书
司机辞职报告范文
2014/01/20 职场文书
公司贷款承诺书
2014/05/30 职场文书
教师一帮一活动总结
2014/07/08 职场文书
建国大业观后感600字
2015/06/01 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书