經(jīng)過樣式和布局,頁面其實理解成html組件..."/>
您好,登錄后才能下訂單哦!
開始了解下小程序的組件。源碼:https://github.com/limingios/wxProgram.git 中的No.10
多個組件構(gòu)成一張視圖頁面
>經(jīng)過樣式和布局,頁面其實理解成html
組件包含<開始標(biāo)簽></結(jié)束標(biāo)簽>
每個組件都包含一些公用屬性
官方的闡述
https://developers.weixin.qq.com/miniprogram/dev/component/
view 組件
>用的最多的,也是之前的樣例也講過。https://developers.weixin.qq.com/miniprogram/dev/component/view.html
演示用例
<!--view.wxml--> <!--手機按住1秒變成灰色,手指松開后2秒變回原來的紅色--> <view?class="container"?hover-class='hover-class'?hover-start-time="10000"?hover-stay-time="2000"> </view>
.container{ ??background-color:?red; } .hover-class{ ??background-color:?gray; }
官網(wǎng)的介紹
>https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
演示
<!--scroll-view.wxml--> <scroll-view?class="container-wrapp"?style='height:300rpx'?scroll-y='true' bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" upper-threshold="0" lower-threshold="0" scroll-top="100" enable-back-to-top="true" scroll-with-animation="true" bindscroll="scroll" scroll-into-view="b" > ??<view?id="a"?class='sizeY?a'>a</view> ??<view?id="b"?class='sizeY?b'>b</view> ??<view?id="c"?class='sizeY?c'>c</view> ??<view?id="d"?class='sizeY?d'>d</view> ??<view?id="e"?class='sizeY?e'>e</view> </scroll-view> <scroll-view?class="container-nowrap"?style='margin-top:250rpx'?scroll-x='true'?scroll-left="200"> ??<view?id="a"?class='sizeX?a'>a</view> ??<view?id="b"?class='sizeX?b'>b</view> ??<view?id="c"?class='sizeX?c'>c</view> ??<view?id="d"?class='sizeX?d'>d</view> ??<view?id="e"?class='sizeX?e'>e</view> </scroll-view>
//scroll-view.js //獲取應(yīng)用實例 Page({ ??scrolltoupper:function(){ ??????console.log("滾動到頂部"); ??}, ??scrolltolower:function(){ ??????console.log("滾動到底部"); ??}, ??scroll:function(){ ????console.log("滾動中。。。"); ??} })
.container-wrap{ ??display:?flex; ??flex-wrap:wrap; } .container-nowrap{ ??display:flex; ??white-space:?nowrap; } .sizeY{ ??width:?100%; ??height:?150rpx; } .sizeX{ ??width:?250rpx; ??height:?150px; ??display:?inline-block; } .a?{ ??background:?red; } .b?{ ??background:?yellow; } .c?{ ??background:?blue; } .d?{ ??background:?green; } .e?{ ??background:?gold; }
注意:enable-back-to-top=”true” 在開發(fā)工具沒辦法演示只能在手機上才能演示出來點擊直接到達頂部的效果。關(guān)于scrollview 只有橫向和縱向,其實這塊還是比較重要的多加練習(xí)吧。
俗稱 輪播圖
官方介紹
>https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
演示
<!--swiper.wxml--> <swiper?indicator-dots="{{indicatorDots}}" ??autoplay="{{autoplay}}"?interval="{{interval}}"?duration="{{duration}}"> ??<block?wx:for="{{imgUrls}}"> ????<swiper-item> ??????<image?src="{{item}}"?class="slide-image"?width="355"?height="150"/> ????</swiper-item> ??</block> </swiper> <button?bindtap="changeIndicatorDots">?indicator-dots?</button> <button?bindtap="changeAutoplay">?autoplay?</button> <slider?bindchange="intervalChange"?show-value?min="500"?max="2000"/>?interval <slider?bindchange="durationChange"?show-value?min="1000"?max="10000"/>?duration
//swiper.js //獲取應(yīng)用實例 Page({ ??data:?{ ????imgUrls:?[ ??????'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', ??????'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', ??????'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ????], ????indicatorDots:?false, ????autoplay:?false, ????interval:?5000, ????duration:?1000 ??}, ??changeIndicatorDots:?function?(e)?{ ????this.setData({ ??????indicatorDots:?!this.data.indicatorDots ????}) ??}, ??changeAutoplay:?function?(e)?{ ????this.setData({ ??????autoplay:?!this.data.autoplay ????}) ??}, ??intervalChange:?function?(e)?{ ????this.setData({ ??????interval:?e.detail.value ????}) ??}, ??durationChange:?function?(e)?{ ????this.setData({ ??????duration:?e.detail.value ????}) ??} })
演示
<!--movable.wxml--> <movable-area?class="container"> ??<movable-view?class='size'?direction='all'?inertia='true'?out-of-bounds='true'?x='50'?y='50' ??damping='100'?friction='100'?bindchange='onchange'?bindscale='onscale'?scale="true"> ??</movable-view> </movable-area>
.container{ ??background-color:?red; ??width:?100%; ??height:?650rpx; } .size{ ??background-color:?yellow; ??width:?300rpx; ??height:?250rpx; }
//movable.js //獲取應(yīng)用實例 Page({ ??onchange:function(){ ????console.log("在移動。。"); ??}, ??onscale:function(){ ????console.log("在縮放") ??} })
PS:跟老鐵一起過了一遍wx小程序關(guān)于視圖的api,感覺還是組件很豐富,很好用!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。