微信小程序实现新闻列表（文字垂直居上垂直居下）
Posted 喵喵喵喵要抱抱
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序实现新闻列表（文字垂直居上垂直居下）相关的知识，希望对你有一定的参考价值。
新闻列表效果
相关原理
值得注意的是，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>；
代码
demo.wxml
<!--pages/demo/demo.wxml-->
<view class="home-block">
<!-- 每日文章 -->
<view class="article-block" wx:for="{{ ArticleList }}" wx:key="index" bindtap="gotoArticleDetail" data-articleid="{{ item.article_id }}">
<view class="article-text">
<view class="article-title">{{ item.title }}</view>
<view class="article-time">{{ item.release_time }}</view>
</view>
<image class="article-image" src="{{ item.image }}"></image>
</view>
</view>
demo.js
// pages/demo/demo.js
Page({
/**
* 页面的初始数据
*/
data: {
ArticleList: [
{
article_id: 1,
title: 'This is Title',
release_time: '2020-03-12 09:42:19',
image: 'https://img1.baidu.com/it/u=1001511637,3492134614&fm=26&fmt=auto&gp=0.jpg',
text: 'This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. ',
teacher_id: 1
},
{
article_id: 2,
title: 'This is Title This is Title',
release_time: '2020-03-12 09:42:19',
image: 'https://img1.baidu.com/it/u=1001511637,3492134614&fm=26&fmt=auto&gp=0.jpg',
text: 'This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. ',
teacher_id: 2
},
{
article_id: 3,
title: 'This is Title This is Title This is Title',
release_time: '2020-03-12 09:42:19',
image: 'https://img1.baidu.com/it/u=1001511637,3492134614&fm=26&fmt=auto&gp=0.jpg',
text: 'This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. ',
teacher_id: 3
},
{
article_id: 4,
title: 'This is Title This is Title This is Title This is Title',
release_time: '2020-03-12 09:42:19',
image: 'https://img1.baidu.com/it/u=1001511637,3492134614&fm=26&fmt=auto&gp=0.jpg',
text: 'This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. This is content of article. ',
teacher_id: 4
}
]
},
/**
* 进入文章详情界面
*/
gotoArticleDetail: function (event) {
// 当前要跳转到另一个界面，但是会保留现有界面
wx.navigateTo({
url: `../article-detail/article-detail?articleid=${event.currentTarget.dataset.articleid}`
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
demo.wxss
/* pages/demo/demo.wxss */
.home-block {
margin-bottom: 20rpx;
}
/* 每日文章 */
.article-block {
display: flex;
height: 220rpx;
width: 350rpx;
margin: 0 50rpx 0 50rpx;
padding: 20rpx 0 20rpx 0;
border-top: 1rpx solid rgba(222, 222, 222, 0.5);
}
.article-text {
position: absolute; /* 父元素绝对定位 */
flex: 1;
height: 220rpx;
width: 350rpx;
}
.article-title {
position: absolute; /* 垂直居上 */
top: 10rpx; /* 垂直居上 */
font-size: 28rpx;
padding-bottom: 10rpx;
}
.article-time {
position: absolute; /* 垂直居下 */
bottom: 0rpx; /* 垂直居下 */
font-size: 22rpx;
color: darkgrey;
padding-bottom: 10rpx;
}
.article-image {
position: absolute;
right: 30rpx;
width: 300rpx;
height: 220rpx;
}
demo.json
{
"usingComponents": {}
}
以上是关于微信小程序实现新闻列表（文字垂直居上垂直居下）的主要内容，如果未能解决你的问题，请参考以下文章