使用微信小程序实现一个查看新闻的页面,需要有标题、时间和正文,wxml、wxss和JavaScript怎么写
时间: 2024-05-14 18:16:25 浏览: 104
首先,需要准备好新闻数据,可以使用一个对象数组来存储每篇新闻的标题、时间和正文。例如:
```javascript
let newsList = [
{
title: '新闻标题1',
time: '2021-01-01',
content: '新闻正文1'
},
{
title: '新闻标题2',
time: '2021-01-02',
content: '新闻正文2'
},
{
title: '新闻标题3',
time: '2021-01-03',
content: '新闻正文3'
}
];
```
接下来,需要在wxml中展示新闻列表。可以使用wx:for循环遍历newsList数组,将每篇新闻的标题、时间和正文分别渲染到对应的标签中。例如:
```html
<!-- news.wxml -->
<view class="news-list">
<view wx:for="{{newsList}}" wx:key="index">
<view class="news-item">
<view class="title">{{item.title}}</view>
<view class="time">{{item.time}}</view>
<view class="content">{{item.content}}</view>
</view>
</view>
</view>
```
在wxss中,可以定义news-list、news-item、title、time和content等样式。例如:
```css
/* news.wxss */
.news-list {
padding: 20rpx;
}
.news-item {
margin-bottom: 20rpx;
}
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.time {
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
}
.content {
font-size: 28rpx;
line-height: 40rpx;
color: #666;
}
```
最后,在JavaScript中,需要将newsList数组绑定到页面的data对象中,以便在wxml中使用。例如:
```javascript
// news.js
Page({
data: {
newsList: newsList
}
});
```
这样,在微信小程序中就可以展示一个简单的新闻列表页面了。
阅读全文