以下是一个简单的新闻列表内容展示的小程序页面代码示范：
html复制代码
<!-- pages/news/index.wxml --> | |
<view class="container"> | |
<view wx:for="{{newsList}}" wx:key="*this"> | |
<news-item wx:if="{{index % 2 === 0}}" data="{{item}}"></news-item> | |
</view> | |
</view> |
html复制代码
<!-- components/news-item/index.wxml --> | |
<view class="news-item"> | |
<image src="{{data.image}}" mode="aspectFill"></image> | |
<text class="title">{{data.title}}</text> | |
<text class="description">{{data.description}}</text> | |
</view> |
css复制代码
/* components/news-item/index.wxss */ | |
.news-item { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.news-item img { | |
width: 100%; | |
height: auto; | |
} | |
.news-item .title { | |
font-size: 18px; | |
margin-top: 10px; | |
} | |
.news-item .description { | |
font-size: 14px; | |
color: #888; | |
margin-top: 5px; | |
} |
在上面的代码中，我们创建了一个名为?newsList?的数组，其中包含新闻列表的数据。在首页的?index.wxml?文件中，我们使用?wx:for?指令遍历?newsList?数组，并使用?news-item?组件展示新闻项。news-item?组件的?data?属性接收新闻项的数据。在?news-item?的?index.wxml?文件中，我们使用?image?组件展示新闻图片，使用?text?组件展示新闻标题和描述。在?index.wxss?文件中，我们定义了新闻项的样式。