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

2023-07-23 19:49:04 482

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

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

list.wxml












{{item.date}}



{{item.description}}


{{item.posts}}

{{item.view}}

list.wxss

/*pages/index/index.wxss*/
.swiper{
width:100%;
height:500rpx;
}
body{
background:black;
}
.swiperimage{
width:100%;
height:500rpx;
}
.list-article{
margin-top:20rpx;
}
.avatar{
margin-bottom:20rpx;
overflow:hidden;
}
.avatarimage{
padding-left:20rpx;
width:100rpx;
height:100rpx;
float:left;
}
.avatartext{
float:left;
height:100rpx;
line-height:100rpx;
padding-left:20rpx;
font-size:0.5rem;
}

.descriptionimage{
width:100%;
height:300rpx;
}
list-article{
flex-direction:column;
}
.descriptiontext{
font-size:25rpx;
letter-spacing:2rpx;
padding-top:20rpx;
padding-left:20rpx;
line-height:40rpx;
}
.article-postimage{
width:30rpx;
height:30rpx;
vertical-align:middle;
}
.article-post{
flex-direction:row;
margin-top:10rpx;
}
.article-posttext{
font-size:20rpx;
vertical-align:middle;
margin-right:10rpx;
}

index.json

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

list.js

//pages/index/index.js
vararticleData=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

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

module.exports={
data:data
}

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

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

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

热门推荐

随机推荐