【微信小程序】实现新闻列表（文字垂直居上、垂直居下）

最新推荐文章于 2024-09-02 21:34:25 发布

嘻嘻的妙妙屋

最新推荐文章于 2024-09-02 21:34:25 发布

阅读量5.4k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序微信

本文链接：https://blog.csdn.net/Jessieeeeeee/article/details/119909408

本文展示了如何利用CSS的absolute定位来创建一个新闻列表效果。在提供的代码示例中，`<view>`元素被用来展示文章标题和时间，并通过绝对定位使其在列表中垂直居上和居下。文章列表数据来源于`ArticleList`数组，每个条目包含文章ID、标题、发布时间和图片。当点击列表项时，会通过`gotoArticleDetail`函数跳转到文章详情页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新闻列表效果

在这里插入图片描述

代码

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