欧美精品黑人粗大视频,少妇与子亂伦在线看,色偷偷av亚洲男人的天堂

ps：上一節我們對登錄頁面進行了大概的講解和說明，這一節，我們重點講動態首頁Home的實現與邏輯分析；
傳送門：
六：登錄Login頁面的實現與講解

實現效果

首先關于動態首頁，大家可以看看實現的效果圖，

動態首頁.png

開始編寫如下代碼

<view class="dynamicListContainer">
  <view class="dynamic1">
    <image>頭像</image>
    <text>姓名</text>
    <text>日期</text>
    <text>內容</text>
    <image>圖片</image>
    <image>點贊圖標</image>
    <text>點贊數量</text>
    <image>評論圖標</image>
    <text>評論數量</text>
  </view>
  <view class="dynamic2">
    <image>頭像</image>
    <text>姓名</text>
    <text>日期</text>
    <text>內容</text>
    <image>圖片</image>
    <image>點贊圖標</image>
    <text>點贊數量</text>
    <image>評論圖標</image>
    <text>評論數量</text>
  </view>
  .
  .
  .
 // 有幾個就寫多少個
</view>

對于一些重復樣式的view，我們建議使用“Template”的模板來進行封裝。

準備工作

首先我們在app.json中添加home頁面，并且暫時先將home頁面移至程序啟動的第一頁面。

"pages": [
    "pages/home/home",
    "pages/login/login"
  ],

編譯運行；

image.png

接著我們還要創建一個名為“ images”的目錄，再新建home的目錄，home里面放入home頁面所需要的圖片資源文件。

image.png

接著讓我們開始編寫home的布局文件代碼。

home.wxml

<view class="innerContainer">

  <view class="dynamicContainer">

    <view class="dynamicTopView">
      <image class="userAvatar" mode="aspectFill" src = "/images/home.avatar.png"></image>
      <view class="userNick-postDate">
        <text class="userNick" >名字</text>
        <text class="postDate">2019-01-01</text>
      </view>
      <image src="/images/home/moreIcon.png" class="moreIcon" ></image>
    </view>

    <text class="contentText"></text>動態內容

    <image class="contentImg"  mode="aspectFill" src="/images/home/basePic2.jpg"></image>

    <view class="dynamicBottomView">
     <image class="favoriteIcon" src="/images/home/xin.png"  mode="aspectFit"  ></image> 
      <text class="favoriteCount">11</text>
      <image class="commentIcon" src="/images/home/pinglun.png"></image>
      <text class="commentCount">22</text>
    </view>

    <view class="bottomLine"></view>

  </view>
  
</view>

home.wxss

.innerContainer {
  margin: 0 30rpx 20rpx 30rpx;
  /* height: 1200rpx; */
  display: flex;
  flex-direction: column;

}
.dynamicContainer {
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
}

.dynamicTopView {
  display: flex;
  flex-direction: row;
}

.userAvatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  vertical-align: middle;
  background-color: lightgray;
}

.userNick-postDate {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.userNick {
  font-size: 28rpx;
  color: #333;
}

.postDate {
  font-size: 20rpx;
  color: lightgray;
}

.contentText {
  font-size: 28rpx;
  color: #555;
  margin-top: 20rpx;
}

.contentImg {
  margin-top: 20rpx;
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  background-color: lightgray;
}

.dynamiBottomView {
  margin-top: 20rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
}

.dynamicBottomView image {
  vertical-align: middle;
}

.favoriteIcon {
  width: 28rpx;
  height: 24rpx;
}

.commentIcon {
  width: 28rpx;
  height: 30rpx;
}

.dynamicBottomView text {
  font-size: 22rpx;
  color: #888;
  vertical-align: middle;
  padding-left: 10rpx;
}

.commentIcon {
  margin-left: 20rpx;
  margin-top: 2rpx;
}

.bottomLine {
  height: 2rpx;
  background-color:#f0f0f0;
  margin: 20rpx 0rpx 10rpx 0rpx;
}


.moreIcon{
  width: 40rpx;
  height: 40rpx;
  vertical-align: middle;
  margin-left: 440rpx;
  margin-top: 10rpx;

}

首先我們創建一個template的文件夾，專門用來存在項目中的模板文件，這里我們創建好“dynamicTemplate”的模板文件（）

模板文件

Template的介紹：

注意：模板文件只有.wxml(布局文件)和.wxss(樣式文件)，在模板中不做任何的邏輯處理，故此次不需要.js和.json文件

dynamic-template.wxml

//假數據布局
//name是必須要的，作為引用的唯一標志符
<template name="dynamicTemplate">
  <view class="dynamicContainer">

    <view class="dynamicTopView">
      <image class="userAvatar" mode="aspectFill" src = "/images/home.avatar.png"></image>
      <view class="userNick-postDate">
        <text class="userNick" >名字</text>
        <text class="postDate">2019-01-01</text>
      </view>
      <image src="/images/home/moreIcon.png" class="moreIcon" ></image>
    </view>

    <text class="contentText"></text>動態內容

    <image class="contentImg"  mode="aspectFill" src="/images/home/basePic2.jpg"></image>

    <view class="dynamicBottomView">
     <image class="favoriteIcon" src="/images/home/xin.png"  mode="aspectFit"  ></image> 
      <text class="favoriteCount">11</text>
      <image class="commentIcon" src="/images/home/pinglun.png"></image>
      <text class="commentCount">22</text>
    </view>

    <view class="bottomLine"></view>

  </view>
</template>

dynamic-template.wxss

.dynamicContainer {
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
}

.dynamicTopView {
  display: flex;
  flex-direction: row;
}

.userAvatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  vertical-align: middle;
  background-color: lightgray;
}

.userNick-postDate {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.userNick {
  font-size: 28rpx;
  color: #333;
}

.postDate {
  font-size: 20rpx;
  color: lightgray;
}

.contentText {
  font-size: 28rpx;
  color: #555;
  margin-top: 20rpx;
}

.contentImg {
  margin-top: 20rpx;
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  background-color: lightgray;
}

.dynamiBottomView {
  margin-top: 20rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
}

.dynamicBottomView image {
  vertical-align: middle;
}

.favoriteIcon {
  width: 28rpx;
  height: 24rpx;
}

.commentIcon {
  width: 28rpx;
  height: 30rpx;
}

.dynamicBottomView text {
  font-size: 22rpx;
  color: #888;
  vertical-align: middle;
  padding-left: 10rpx;
}

.commentIcon {
  margin-left: 20rpx;
  margin-top: 2rpx;
}

.bottomLine {
  height: 2rpx;
  background-color:#f0f0f0;
  margin: 20rpx 0rpx 10rpx 0rpx;
}


.moreIcon{
  width: 40rpx;
  height: 40rpx;
  vertical-align: middle;
  margin-left: 440rpx;
  margin-top: 10rpx;

}

編譯運行：

image.png

我們此處來用一個循環來加載多條假數據

<view class="innerContainer">

  <block wx:for = "{{[1,2,3]}}" >

  <view class="dynamicContainer">

    <view class="dynamicTopView">
      <image class="userAvatar" mode="aspectFill" src = "/images/home.avatar.png"></image>
      <view class="userNick-postDate">
        <text class="userNick" >名字</text>
        <text class="postDate">2019-01-01</text>
      </view>
      <image src="/images/home/moreIcon.png" class="moreIcon" ></image>
    </view>

    <text class="contentText"></text>動態內容

    <image class="contentImg"  mode="aspectFill" src="/images/home/basePic2.jpg"></image>

    <view class="dynamicBottomView">
     <image class="favoriteIcon" src="/images/home/xin.png"  mode="aspectFit"  ></image> 
      <text class="favoriteCount">11</text>
      <image class="commentIcon" src="/images/home/pinglun.png"></image>
      <text class="commentCount">22</text>
    </view>

    <view class="bottomLine"></view>

  </view>

  </block>
</view>

編譯：

image.png

這里我們就完成了一個粗略的動態列表頁面了，只不過我們的所有內容都是以假數據的形式來展示的。

下一節，我將為大家介紹如何動態的展示數據，拋開假數據的形式，所有的內容，我們都從服務器后臺來加載。

下一節：
傳送門：
八：動態首頁Home的數據綁定

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

小程序開發七：動態首頁Home頁面的搭建（假數據呈現）

小程序開發七：動態首頁Home頁面的搭建（假數據呈現）

實現效果

準備工作

home.wxml

home.wxss

Template的介紹：

編譯運行：

編譯：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

小程序開發七：動態首頁Home頁面的搭建（假數據呈現）

實現效果

準備工作

home.wxml

home.wxss

Template的介紹：

編譯運行：

編譯：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频