帮我写一个微信小程序的新闻列表页面
时间: 2023-12-19 10:06:57 浏览: 87
当然可以,以下是一个简单的微信小程序新闻列表页面的代码示例:
```html
<!-- index.wxml -->
<view class="news-list">
<block wx:for="{{newsList}}" wx:key="id">
<view class="news-item" bindtap="onItemClick" data-id="{{item.id}}">
<image class="news-img" src="{{item.image}}" />
<view class="news-info">
<view class="news-title">{{item.title}}</view>
<view class="news-time">{{item.time}}</view>
</view>
</view>
</block>
</view>
```
```css
/* index.wxss */
.news-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20rpx;
}
.news-item {
width: 49%;
margin-bottom: 20rpx;
background-color: #fff;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
border-radius: 5rpx;
}
.news-img {
width: 100%;
height: 120rpx;
border-top-left-radius: 5rpx;
border-top-right-radius: 5rpx;
object-fit: cover;
}
.news-info {
padding: 10rpx;
font-size: 28rpx;
line-height: 1.5;
color: #333;
}
.news-title {
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news-time {
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
}
```
```javascript
// index.js
Page({
data: {
newsList: [
{
id: 1,
image: 'https://picsum.photos/200/300',
title: '新闻标题1',
time: '2022-01-01',
},
{
id: 2,
image: 'https://picsum.photos/200/300',
title: '新闻标题2',
time: '2022-01-02',
},
{
id: 3,
image: 'https://picsum.photos/200/300',
title: '新闻标题3',
time: '2022-01-03',
},
{
id: 4,
image: 'https://picsum.photos/200/300',
title: '新闻标题4',
time: '2022-01-04',
},
],
},
onItemClick(event) {
const { id } = event.currentTarget.dataset;
wx.navigateTo({
url: `/pages/news/detail?id=${id}`,
});
},
});
```
这个示例页面包含一个 `newsList` 数组,其中每个元素包含新闻的 `id`、`image`、`title` 和 `time` 四个属性。该页面使用 Flex 布局将新闻列表排成两列,每个新闻项的图片和标题都可以点击跳转到新闻详情页面。
阅读全文
相关推荐














