微信小程序文章列表功能的代码实例
这篇文章主要讲解了微信小程序文章列表功能的代码实例,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联公司-专业网站定制、快速模板网站建设、高性价比桐城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式桐城网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖桐城地区。费用合理售后完善,十余年实体公司更值得信赖。
本文实例讲述了微信小程序文章列表功能。分享给大家供大家参考,具体如下:
没有服务器接口数据的情况下玩一玩。
list.wxml
{{item.date}} {{item.description}} {{item.posts}} {{item.view}}
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 提供了暴露接口的方法。
看完上述内容,是不是对微信小程序文章列表功能的代码实例有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
当前题目:微信小程序文章列表功能的代码实例
分享网址:http://azwzsj.com/article/geepss.html