微信小程序列表页

最新推荐文章于 2024-08-07 21:00:00 发布

zhoushenxian

最新推荐文章于 2024-08-07 21:00:00 发布

阅读量4.7k

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/coderinchina/article/details/84062130

版权

这篇博客介绍了如何在微信小程序中实现列表布局，从最基础的静态布局开始，逐步通过添加样式实现布局优化。作者通过实例展示了如何使用flex布局模仿Android的LinearLayout，并探讨了数据动态绑定和组件复用的方法，最终实现动态数据加载和列表组件的重复利用。

摘要由CSDN通过智能技术生成

我们在做Android开发时,几乎每个app都有几个列表,在Android中列表一般是用listview，后来就使用recyclerview做了,不管是小程序还是Android或者ios，列表都是常见的一种数据展示方式,那么在小程序中怎么实现呢？先使用最笨的方法做,

如图：

针对上面的列表分析:它整体是一个垂直布局,第一部分头像+日期是一个横向布局,下面是一张图片,再下面是一段文字描述,再下面也是一个横向布局点赞+回复的图片和文字个数，那么现在就一步步来实现这个效果,先简单的布局：

<view>
 <view>
    <view>
      <image src='/images/user_header.png'></image>
      <text>Nov 2018-11-14</text>
    </view>
    <image src='/images/cat.png'></image>
    <text>菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满</text>
 </view>
</view>

预览：

发现和我们想要的效果实在差的太远,这是因为没有使用到样式给它穿上漂亮的衣服

现在先给最外层以及头像和日期整块和头像部分添加样式控制

<view>
 <view class='posts-container'>
    <view class='posts-author_date'>
      <image src='/images/user_header.png' class='user_authr'></image>
      <text>Nov 2018-11-14</text>
    </view>
    <image src='/images/cat.png'></image>
    <text>菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满</text>
 </view>
</view>

样式控制：


.posts-container{
  display: flex;
  flex-direction: column;
  margin-bottom: 40rpx;
  background-color: #fff;
  padding-bottom: 5px;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed
}

.posts-author_date{
   display: flex;
   flex-direction: row;
}
.user_authr{
  width: 60rpx;
  height: 60rpx;
}

其中最重要的还是display:flex 这是注明是弹性布局,flex-direction:表明放向 row是横向 column是竖向,这就好比是我们Android中的LinearLayout一样

现在的效果：

是不是比之前有进步,再进一步调样式

<view>
 <view class='posts-container'>
    <view class='posts-author_date'>
      <image src='/images/user_header.png' class='user_authr'></image>
      <text class='date'>Nov 2018-11-14</text>
    </view>
    <image src='/images/cat.png' class='posts_detail_img'></image>
    <text class='posts_title'>菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满</text>
  <view class='posts-bottom-like'>
    <image src='/images/chat.png' class='posts-like'></image>
    <text class='like-text'>96</text>
      <image src='/images/view.png' class='reply-like'></image>
    <text class='reply-text'>32</text>
  </view>
 </view>
</view>

样式：


.posts-container{
    flex-direction:column;
    display:flex;
    margin-top:20rpx;
    margin-bottom:40rpx;
    margin-left: 0rpx;
    background-color:#fff;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    padding-bottom: 5px;
}

.posts-author_date{
   display: flex;
   flex-direction: row;
    margin-top:10rpx;
    margin-bottom: 20rpx;
    margin-left: 10px;
}
.date{

    vertical-align: middle;
    font-size: 26rpx;
    margin:  auto 0px;
    margin-lef