小程序組件

• 視圖容器

(一) 視圖容器

• 了解小程序組件中的視圖容器
• 明確小程序組件中的視圖容器的用途和方法
• 了解不同視圖容器的特點和注意事項

(1) view 視圖容器

view視圖容器:是小程序最基礎(chǔ)的組件序芦，借助view可以實現(xiàn)頁面結(jié)構(gòu)的劃分勉抓，頁面布局的調(diào)整等.

 <view hover-class="view_hover" hover-start-time=500 hover-stay-time=500  hover-stop-propagation= true > 123</view>

view除了基礎(chǔ)的公共屬性外，還有四個屬性

(2) scroll-view容器

• scroll-view 視圖容器: 可以在頁面形成一個可以滾動的視圖區(qū)域，幫助開發(fā)者實現(xiàn)頁面部分內(nèi)容的滑動展示

<scroll-view
      scroll-x
      upper-threshold = 50
      lower-threshold = 50
      scroll-top = 50
      scroll-left =50
      scroll-into-view="part1"
      scroll-with-animation = true
      enable-back-to-top = true
></scroll-view>

請勿在scroll-view中使用textarea ,map,canvas,video組件
scroll -into-view的優(yōu)先級高于scroll-top;
在滾動scroll-view時會阻止頁面回彈节槐，所以在scroll-view中滾動搀庶，是無法觸發(fā)onPullDownRefresh
若要使用下拉刷新拐纱，請使用頁面的滾動而不是scroll-view這樣也能通過點擊頂部狀態(tài)欄回到頁面頂部

(3)swiper容器

• swiper滑塊容器能夠在小程序內(nèi)實現(xiàn)輪播圖的效果

swiper組件除了公共屬性外铜异，還有一些特殊的屬性

• 指示點控制

• 播放控制

• 滑塊控制

• 事件屬性

• swiper組件使用注意

swiper中只可以放置<swiper-item>組件，否則會導(dǎo)致未定義行為
如果在bindchange的事件回調(diào)函數(shù)中使用setData改變current值食茎，則有可能導(dǎo)致setData被不停的調(diào)用,因為通常情況下請在改變current值前檢測source字段判斷是否用戶觸摸引起

 <swiper
        indicator-dots="{{indicatorDots}}" 
         autoplay="{{autoplay}}" 
         circular="{{circular}}" 
         vertical="{{vertical}}"
        interval="{{interval}}" 
        duration="{{duration}}" 
         previous-margin="{{previousMargin}}px" 
         next-margin="{{nextMargin}}px">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>

(4)movable-view 可視圖容器

• movable-view : 是小程序的可移動視圖容器,用于制作一些需要滑動操作的場景

<movable-area>
 <movable-view x="{{x}}" y="{{y}}" direction="all"></movable-view>
</movable-area>

movable-view 必須設(shè)置width和height屬性唠倦，不設(shè)置默認為10px
movable-view 默認為絕對定位，top和left屬性為0px
當(dāng)movable-view小于movable-area時涮较，movable-view的移動范圍是在movable-area內(nèi)稠鼻；當(dāng)movable-view>大于movable-area時，movable-view的移動范圍必須包含movable-area（x軸方向和y軸方向分開考慮）

<movable-area>
      <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
 </movable-area>

(五)cover-view覆蓋文字組件 cover-image

• cover-view組件能夠覆蓋在原生組件上狂票，從而實現(xiàn)原生組件上顯示一些文本內(nèi)容
• cover-view組件可以覆蓋map,video,canvas,camera這四種原生組件

<video>
<cover-view>
  <cover-view>
   <cover-image/>
  </cover-view>
</cover-view>
</video>

cover-view支持設(shè)置overflow:scroll但不能動態(tài)更新
cover-view支持position:fixed
cover-view只支持基本的定位候齿，布局，文本樣式。不支持設(shè)置的單邊的border,background-image,shadow,overflow:visible