2、3章 rpx响应式单位与flex布局与阅读列表与数据绑定

1.1. image标签显示一张图片

1.增加一个欢迎目录
app.json:

{
  "pages": [
    "pages/welcome/welcome",
    "pages/index/index"
  ],
  "sitemapLocation": "sitemap.json"
}

2.welcome.wxml:

<image src="/images/avatar/1.png" />
<text>Hello,6月</text>
<button></button>

image组件默认宽度320px、高度240px

1.2. 小程序rpx响应式单位的特点

尺寸单位:rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。1rpx = 0.5px = 1物理像素。
1.使用px

rpx:

<image style="width:200rpx;height:200rpx" src="/images/avatar/1.png" />
<text>Hello,6月</text>
<button></button>

1.3.分离CSS样式到WXSS文件中

1.welcome.wxml:

<image class="avatar" src="/images/avatar/1.png" />
<text>Hello,6月</text>
<button>开启小程序之旅</button>

2.welcome.wxss:

.avatar{
    width:200rpx;
    height:200rpx;
    margin-top:160rpx

}

1.4初始flex布局进行垂直分布布局

1.5. flex布局的align-items

welcome.wxml:

<view class="container">
<image class="avatar" src="/images/avatar/1.png" />
<text class="motto">Hello,6月</text>
<!-- <button></button> -->
<view class="journey-container">
<text class="journey">开启小程序之旅</text>
</view>
</view>
<!--flex 容器布局-->

welcome.wxss

.container{
    display:flex;
    flex-direction: column;
    align-items: center;
    
}
.avatar{
    width:200rpx;
    height:200rpx;
    margin-top:160rpx

}
.motto{
    margin-top: 100rpx;
    font-size: 32rpx;
    font-weight: bold;
}
.journey-container{
    border: 1px solid #405f80;
    width: 200rpx;
    height: 80rpx;
    border-radius: 5px;
    text-align: center;
}
.journey{
    font-size: 22rpx;
    color: #405f80;
    line-height: 80rpx;
    font-weight: bold;
}

1.6.背景颜色

zzai
在app.json里进行修改：

“window”: {
“navigationBarBackgroundColor”:"#b3d4db"
},


全部变成蓝色：
容器外面用page包裹，所以给page设置背景颜色

2.用Flex布局组织布局思路

<view>
<swiper vertical="{{false}}" interval="3000" circular indicator-dots="{{true}}" autoplay="true" >
<swiper-item >
  <image src="/images/post/sls.JPG"></image>
</swiper-item>
<swiper-item>
  <image src="/images/post/bl.png">
</image>
</swiper-item>
<swiper-item>
  <image src="/images/3jpg.jpg">
</image>
</swiper-item>
</swiper>

<view class="post-container">

<view class="post-author-date">
  <image class="post-author" src="/images/3jpg.jpg"></image>
  <text class="post-date">Nov 25 2021</text>
</view>

<text class="post-title">如果在儿童和成年人之间展开一场全能比赛，你觉得儿童会在哪些方面胜出?</text>

<image class="post-image" src="/images/2.jpg"></image>

<text class="post-content">昨天雨后，楼下的小操场上留下几个浅浅的小水洼。
在我看来这就是一个普普通通的小水洼，甚至要绕行以免弄湿鞋子。可在我两个孩子看来，这是欢乐的海洋，他们一会儿在水中奔跑，一会儿在水中跳跃，那种自由自在的快乐感染者身边的我。
我不禁好奇，除了感知快乐的能力，儿童还有哪些强于成年人的能力呢?
</text>

<view class="post-like">
  <image class="post-like-image" src="/images/icon/chat.png"></image>
  <text class="post-like-font">90</text>
  <image class="post-like-image" src="/images/icon/view.png"></image>
  <text class="post-like-font">102</text>
</view>
</view>
</view>

swiper{
  width: 100%;
  height: 460rpx;
}
swiper image{
  width: 100%;
  height: 460rpx;
}
.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top:1px solid #ededed;
  border-bottom: 1px solid#ededed;
  padding-bottom: 10rpx;
}
.post-author-date{
  /* margin-top: 10rpx;
  margin-bottom: 20rpx;
  margin-left: 10rpx; */
  margin: 10rpx 0 20rpx 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.post-author{
  width: 60rpx;
  height: 60rpx;
  /* vertical-align: middle; */
}
.post-date{
  margin-left: 20rpx;
  /* vertical-align: middle; */
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  color: #333;
}
.post-image{
  width: 100%;
  height: 340rpx;
  margin-bottom: 30rpx;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  /* 字的行距 */
  line-height: 40rpx;
  /* 字的间距 */
  letter-spacing: 2rpx;
}
.post-like{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20rpx;
}
.post-like-image{
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}
.post-like-font{
  margin-right: 40rpx;
  font-size: 20rpx;
}

这一部分为轮播图


总结：

• image标签

• rpx

• flex布局进行垂直分布布局

• flex布局的align-items

• LinUI组件

• l-avatar头像和昵称组件

• 编译模式

• Swiper和Swiper-ltem组件

  • 滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
  • indicator-dots boolean false 否 是否显示面板指示点
  • autoplay boolean false 否 是否自动切换
  • interval number 5000 否 自动切换时间间隔
  • vertical boolean false 否 滑动方向是否为纵向

• 用Flex布局组织布局思路