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

最新推荐文章于 2024-04-06 02:27:00 发布

米饭，℡

最新推荐文章于 2024-04-06 02:27:00 发布

阅读量577

点赞数 1

分类专栏：页面案例 uni-app 小程序文章标签：微信小程序 uni-app 小程序

本文链接：https://blog.csdn.net/weixin_42317757/article/details/130931563

版权

小程序同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

uni-app

28 篇文章 0 订阅

订阅专栏

页面案例

24 篇文章 0 订阅

订阅专栏

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

<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;
}