【页面案例汇总】新闻资讯类uni-app微信小程序页面

代码示例：
包括一个新闻列表和一个轮播图组件：

<view class='page'>
  <swiper autoplay='true' circular='true'>
    <swiper-item>
      <image class='image' src='https://picsum.photos/750/320?random=1'></image>
    </swiper-item>
    <swiper-item>
      <image class='image' src='https://picsum.photos/750/320?random=2'></image>
    </swiper-item>
    <swiper-item>
      <image class='image' src='https://picsum.photos/750/320?random=3'></image>
    </swiper-item>
  </swiper>
  <view class='list'>
    <view class='item'>
      <image class='thumbnail' src='https://picsum.photos/100/100?random=4'></image>
      <text class='title'>这是一篇新闻标题</text>
      <text class='summary'>这是一篇新闻简介</text>
    </view>
    <view class='item'>
      <image class='thumbnail' src='https://picsum.photos/100/100?random=5'></image>
      <text class='title'>这是一篇新闻标题</text>
      <text class='summary'>这是一篇新闻简介</text>
    </view>
    <view class='item'>
      <image class='thumbnail' src='https://picsum.photos/100/100?random=6'></image>
      <text class='title'>这是一篇新闻标题</text>
      <text class='summary'>这是一篇新闻简介</text>
    </view>
  </view>
</view>

.page {
    
    
  background-color: #f5f5f5;
}
.swiper {
    
    
  width: 100%;
  height: 320rpx;
}
.image {
    
    
  width: 100%;
  height: 100%;
}
.list {
    
    
  margin-top: 20rpx;
  padding: 10rpx;
  background-color: #ffffff;
}
.item {
    
    
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.thumbnail {
    
    
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.title {
    
    
  font-size: 28rpx;
  color: #333333;
}
.summary {
    
    
  font-size: 24rpx;
  color: #999999;
}