全棧開發工程師微信小程序-上(中)

全棧開發工程師微信小程序-上(中)

width: 750rpx;

750rpx表明與屏幕等寬,rpx的縮寫responsive pixel,這個單位是能夠根據屏幕大小進行自適應調整的像素單位.

小程序規定屏幕的寬度爲750.iPhone6的屏幕寬度爲375px,共有750個物理像素,750rpx=375px=750物理像素.1rpx=0.5px=1物理像素.

絕對定位

position: absolute;

相對於父容器進行絕對定位.

tabBar用於設置小程序底部的導航欄.
color表明tabBar默認的文本顏色.
selectedColor是當前tab被選中的文本顏色.
borderStyle是上邊框顏色-white和black
backgroundColor是tabBar的背景底色.
list是tab的集合.
pagePath是頁面路徑.
iconPath是默認的常態圖標.
selectedIconPath是選中時的圖標.

import與include

<import src="template.wxml">

include的引用是將目標文件的代碼複製到include標籤所在的位置.

concat會將兩個或多個數組合併爲一個數組.

scroll-view是可滾動視圖容器的組件,scroll-y表明豎向滾動,lower-threshold表明距離底部多遠.

let app = getApp()

調用圖像預覽接口

previewImage(event){
 wx.previewImage({
  urls:
 })
}

new Date() 返回當前時間.

getTime() 返回時間的毫秒.

// 下拉
{
 "enablePullDownRefresh": true
}

wx:if條件

<text wx:if="{{!item.image}}">{{item.text}}</text>

let是塊級做用域聲明符,var是聲明的變量僅在當前代碼塊中有效.

navigator組件

navigate: 保留當前頁面
redirect: 關閉當前頁面
switchTab: 跳轉到tabBar頁面
reLaunch: 關閉全部頁面
navigateBack: 關閉當前頁面

只有switchTab,reLaunch能夠跳轉到tabBar頁面.要有open-type屬性設置.

wx.showModal({
 title: "",
 content: "",
})
// title提示窗口標題
// content提示內容

view
視圖容器。

view是小程序中的萬能視圖.

hover-class 指定按下去的樣式類
hover-stop-propagation 指定是否阻止本節點的祖先節點出現點擊態
hover-start-time 按住後多久出現點擊態
hover-stay-time 手指鬆開後點擊態保留時間

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

scroll-view
可滾動視圖區域。

scroll-x 容許橫向滾動 
scroll-y 容許縱向滾動
upper-threshold 距頂部/左邊多遠時
lower-threshold 距底部/右邊多遠時
scroll-top 設置豎向滾動條位置
scroll-left 設置橫向滾動條位置
bindscrolltoupper 滾動到頂部/左邊
bindscrolltolower 滾動到底部/右邊

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view
    scroll-y
    style="height: 200px;"
    bindscrolltoupper="upper"
    bindscrolltolower="lower"
    bindscroll="scroll"
    scroll-into-view="{{toView}}"
    scroll-top="{{scrollTop}}"
  >
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view</button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red" class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

const order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper(e) {
    console.log(e)
  },
  lower(e) {
    console.log(e)
  },
  scroll(e) {
    console.log(e)
  },
  tap(e) {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

監聽頁面滾動到底部和頂部

bindscrolltoupper = "scrollToSide"
bindscrolltolower = "scrollToSide"
bindscroll="scroll"

scrollToSide(e){
 if(e.detail.direction == "top"){
  wx.showToast({
   title: "",
  })
 }else if(e.detail.direction == "bottom"){
  wx.showToast({
   title: "",
  })
 }
}

swiper
滑塊視圖容器。

indicator-dots 是否顯示面板指示點
indicator-color 指示點顏色
indicator-active-color 當前選中的指示點顏色
autoplay 是否自動切換
current 當前所在滑塊的 index
interval 自動切換時間間隔
duration 滑動動畫時長
circular 是否採用銜接滑動
vertical 滑動方向是否爲縱向

movable-view
可移動的視圖容器，在頁面中能夠拖拽滑動

direction movable-view的移動方向，屬性值有all、vertical、horizontal、none
inertia movable-view是否帶有慣性
disabled 是否禁用

cover-view

覆蓋在原生組件之上的文本視圖

可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button

cover-image
覆蓋在原生組件之上的圖片視圖

若是看了以爲不錯

點贊！轉發！

達叔小生：日後餘生，惟獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動而且善於溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其餘知識 深刻講解 ，有興趣能夠繼續關注
• 小禮物走一走 or 點贊