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

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

主要介绍了微信小程序文章列表功能,结合完整实例形式详细分析了微信小程序文章列表功能具体布局、样式、功能相关实现技巧,需要的朋友可以参考下

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

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

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>

<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>

list.wxss

/* pages/index/index.wxss */

.swiper{

width: 100%;

height: 500rpx;

}

body{

background: black;

}

.swiper image{

.avatar{

margin-bottom: 20rpx;

overflow: hidden;

}

.avatar image{

padding-left:20rpx;

width:100rpx;

height: 100rpx;

float: left;

}

}

.description image{

width:100%;

height: 300rpx;

}

list-article{

flex-direction: column;

}

.description text{

.article-post image{

width: 30rpx;

height: 30rpx;

vertical-align: middle;

}

.article-post{

flex-direction: row;

margin-top:10rpx;

}

.article-post text{

"navigationBarBackgroundColor": "#405f80",

"navigationBarTitleText": "一点新闻"

}

list.js

// pages/index/index.js

var articleData = require("/../../data/article-data.js");

Page({

/**

* 页面的初始数据

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {