2018-07-10  444 views 4

ASP.NET WebAPI 开发小程序(列表页)开发之列表布局实例(三)

ASP.NET API 开发小程序(列表页)开发实例之如何进行布局(二)中已经讲如何进行小程序的基础布局,并了解了一些常见布局中遇到的问题如何解决,本篇我们就着重了解下,当前实例项目,列表页是如何实现的。

本系列教程的结构如下:

 1 )小程序基础知识(常用且浅显)

2)小程序基础布局知识

3)小程序列表页布局实例

 4)ASP.NET WebAPI 开发小程序(列表页)开发之获取列表页数据WebAPI编写实例

5)小程序请求ASP.NET WebAPI数据并在前端实现数据绑定实例

6)小程序数据提交Post的使用

最终UI实现效果如下:

实现代码如下:

wxml:

<view class='list-item'>
  <view class='list-left'>
    <view class='list-title'>
      这条新闻太旧啦,真的不好看,各种标题党...
    </view>
    <view class='list-readnum'>
      2951次阅读
    </view>
  </view>
  <view class='readMore'>
    详情
  </view>
</view>
<view class='list-item'>
  <view class='list-left'>
    <view class='list-title'>
      这条新闻太旧啦,真的不好看,各种标题党...
    </view>
    <view class='list-readnum'>
      2951次阅读
    </view>
  </view>
  <view class='readMore'>
    详情
  </view>
</view>
<view class='list-item'>
  <view class='list-left'>
    <view class='list-title'>
      这条新闻太旧啦,真的不好看,各种标题党...
    </view>
    <view class='list-readnum'>
      2951次阅读
    </view>
  </view>
  <view class='readMore'>
    详情
  </view>
</view>
<view class='list-item'>
  <view class='list-left'>
    <view class='list-title'>
      这条新闻太旧啦,真的不好看,各种标题党...
    </view>
    <view class='list-readnum'>
      2951次阅读
    </view>
  </view>
  <view class='readMore'>
    详情
  </view>
</view>

wxss:

Page{
  font-size: 24rpx;
}
.list-item{
  padding:20rpx 10rpx;
  border-bottom:1px dashed #ccc;
  display: flex;
}
.list-left{
  width: 1300rpx;
}
.list-readnum{
  font-size: 22rpx;
  color:#ccc;
  padding:12rpx 0 0 0;
}
.readMore{
  width:200rpx;
  font-size: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 78rpx;
}
.readMore::after{
  content: ' >>';
}

本篇主要讲解本次项目中列表页的绘制,仅供参考。

系列教程未完,待续。。。

4 条留言  访客:0 条  博主:0 条   引用: 4 条

来自外部的引用: 4 条

  • ASP.NET API 开发小程序(列表页)开发之列表布局实例(四) | 落雨信息
  • ASP.NET WebAPI 开发小程序(列表页)开发之前端绑定列表页数据实例(五) | 落雨信息
  • ASP.NET API 开发小程序(列表页)开发实例之如何进行布局(二) | 落雨信息
  • ASP.NET WebAPI 开发小程序(列表页)开发实例 知识基础(一) | 落雨信息

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: