scroll-view滾動檢視的使用

在微信開發者工具中封裝好了這個功能。
首先要把幾個view標籤放入一個盒子，成為行元素。不壓縮每一個view使得view溢位介面，這是可以滾動檢視。

橫向滾動檢視

WXML

  <scroll-view scroll-x>
    <view class="scrout">
        <view class="scrbox">111</view>
        <view class="scrbox">222</view>
        <view class="scrbox">333</view>
        <view class="scrbox">444</view>
        <view class="scrbox">555</view>
    </view>
   
  </scroll-view>
 

WXSS

.scrout{ border: 1px solid green;display: flex;flex-wrap:nowrap}
.scrbox{width: 100px;height:100px;background:gold;margin-right: 2px;flex:0 0 100px;}

效果


另外還可以調整滾動開始位置，如果是橫向滾動使用scroll-left，反之縱向滾動使用 scroll-top

更多引數點選檢視微信開放文件

縱向滾動檢視

縱向滾動檢視：和橫向有所差別，橫向的檢視是height 100%，width 有固定的數值。在縱向滾動檢視中就是height有固定的數值限制，width是一個100%。
WXML

 <scroll-view class="scroll2" scroll-y scroll-top="150px">
    <view class="scrout2">
        <view class="scrbox2">111</view>
        <view class="scrbox2">222</view>
        <view class="scrbox2">333</view>
        <view class="scrbox2">444</view>
        <view class="scrbox2">555</view>
    </view>
   
  </scroll-view>
 

WXSS

.scroll2{height: 350px;}
.scrbox2{width: 100%; height: 100px;background:pink;margin-bottom: 1px;}

效果

app.josn中的window配置

window用於設定小程式的狀態列、導航條、標題、視窗背景色。

全域性配置一個下拉loading為黑色，導航欄背景顏色為灰色，導航欄標題顏色為黑色，可以下拉重新整理且背景顏色為黃色的小程式視窗配置

  "window":{

    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "mypage",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "yellow"

  
  },

tabBar

如果小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。也就是導航欄。在app.josn檔案裡面和window屬於同級檔案。
一些引數


效果

頁面配置

每一個小程式頁面也可以使用 .json 檔案來對本頁面的視窗表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。檔案內容為一個 JSON 物件。

修改demo1的 demo1.json檔案
修改導航欄的顏色為#0094aa，頁面text為demo-1

程式碼編輯技巧

1.text標籤相對於是web中的span標籤，屬於行內元素

2.view標籤相對於是web中的div標籤，屬於塊級元素 會換行

3.在page.js檔案中如果不小心破壞了原有的結構，也不必擔心在區域性頁面中輸入page然後選擇page的結構，會自動生成結構

資料繫結

先把資料寫入page.js 檔案中去

字串型別

數字型別

bool型別

object物件型別

在標籤的屬性中使用

<view data-num="{{num}}">注意把資料作為標籤屬性的時候需要在外面加上雙引號</view>

使用bool型別充當屬性

<view>
  <checkbox checked="{{isBattleship}}">
  讓巴爾是戰列艦
  </checkbox>
</view>

運算

可以在花括號中加入一些簡單的表示式和語句

表示式

1.數字的運算
2.字串的拼接
3.三目運算子

<view>{{10%2===0 ? '偶數' : '奇數'}}</view>

列表渲染

陣列迴圈

1.wx:for={{陣列或物件}}， wx:for-item=“迴圈項名稱” wx:for-index="迴圈項的索引"

2.wx:key="唯一的值" 用來提高列表渲染的效能

1.如果繫結的一個普通字串，那麼這個字串的名稱就是wx:key
2.如果繫結一個普通的陣列就是用 *this 作為wx:key

3.當出現迴圈巢狀的時候尤其要注意不要出現以下繫結名稱重名

wx:for-item=“迴圈項名稱” wx:for-index="迴圈項的索引"

4.預設情況下不需要寫wx:for-item=“迴圈項名稱” wx:for-index="迴圈項的索引，前提是隻有一層迴圈巢狀的時候，開發者工具會預設迴圈項名稱為 item

WXSS

list:[
      {
        id:0,
        name:'蒙大拿'

      },
      {
        id:1,
        name:'讓巴爾'

      },
      {
        id:3,
        name:'陸奧'

      }
    ]

WXML

<view>
  <view
    wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index"
    wx:key="id">
    rank:{{index}}
    --
    name:{{item.name}}
  </view>
</view>

列表迴圈

1.wx:for={{物件}}， wx:for-item=“物件的值 value” wx:for-index="物件的屬性 key"

2.迴圈物件的時候最好把item和index的名稱都修改

wx:for-item="value"，wx:for-index="key"

<view>
  <view
  wx:for="{{person}}"
  wx:for-item="value"
  wx:for-index="key"
  wx:key="age"
  >
  屬性:{{key}}
  --
  值:{{value}}
  </view>
</view>

block標籤

block無論什麼情況都不會渲染到頁面上，因此它不是一個元件。它只會用於處理邏輯
使用場景：如果專案中多個元件是同樣的邏輯，那麼多個元件最好被block包裹，這樣程式碼的可讀性也很高。並且block也可以巢狀block。