⼩程序⽂章列表功能完整实例本⽂实例讲述了⼩程序⽂章列表功能。分享给⼤家供⼤家参考，具体如下：
没有服务器接⼝数据的情况下玩⼀玩。
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:"我的⼼分外地寂寞。然⽽我的⼼很平安；没有爱憎，没有哀乐，也没有颜⾊和声⾳。我⼤概⽼了。我的头发已经苍⽩，不是很明⽩的事么？我的⼿颤抖着，不是很明⽩的事么？那么我的灵魂的⼿⼀定也颤抖着，头发也⼀定苍⽩了。然⽽这是许多年前的事}];
data: data
}
希望本⽂所述对⼤家⼩程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。