微信小程序回到頂部按鈕制作方式講解

2017-06-14

導(dǎo)讀：2017年6月14日，微信小程序回到頂部已經(jīng)是當(dāng)下微信小程序開發(fā)最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦蚧氐巾敳考皩?yīng)按鈕制作方法相關(guān)的內(nèi)容。...

2017年6月14日，微信小程序回到頂部已經(jīng)是當(dāng)下微信小程序開發(fā)最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦蚧氐巾敳考皩?yīng)按鈕制作方法相關(guān)的內(nèi)容。

6月14日消息，據(jù)彭博社報(bào)道，為了與新東家沃爾瑪（Walmart）融合得更加順暢，Jet.com（去年8月被沃爾瑪以33億美元收購）正計(jì)劃逐步剔除自己平臺上所售的Costco旗下品牌產(chǎn)品。

6月18日，永輝將在福州開出第一家永輝生活店。值得注意的是，這也是永輝首家24小時(shí)營業(yè)門店。據(jù)了解，這家24小時(shí)門店商品由永輝物流統(tǒng)一配送，沒有熟食但提供蔬菜水果以及冷凍冰鮮類商品。

我們先看一下效果吧，直接上圖。

第一種情況,當(dāng)頁面在頂部的時(shí)候，回到頂部按鈕是不會出現(xiàn)的。

微信小程序回到頂部按鈕制作方式講解

第二種情況,當(dāng)頁面在離開頂部一定距離的時(shí)候，回到頂部按鈕出現(xiàn)

微信小程序回到頂部按鈕制作方式講解

接下就是對代碼的分析了：
在這里我們?nèi)绻褂脻L動事件的話，小程序規(guī)定最外層一定要使用scroll-view標(biāo)簽進(jìn)行包裹，然后在設(shè)置scroll-y=”true” 意思是允許頁面了縱向滾動，scroll-top是滾動到頂部做處理，一般綁定一個(gè)事件，bindscrolltolower同樣的原理，滾動到底部做處理，bindscroll表示在滾動的時(shí)候出發(fā)這個(gè)事件。下面WXML內(nèi)部的話，就是我們回到頂部的按鈕設(shè)置，我們在點(diǎn)擊它時(shí)綁定一個(gè)事件goTop，讓他的滾動高度等于0，這樣它就回到頂部了。

WXML代碼：

<scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="scroll" bindscrolltolower= "scrolltolower" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">

//*********************

頂部

</view>

//*********************

</view>

JS代碼：

//回到頂部按鈕

Page({

data: {

scrollTop: 0

goTop: function(e){

this.setData({

scrollTop:0

})

scroll:function(e,res){

// 容器滾動時(shí)將此時(shí)的滾動距離賦值給 this.data.scrollTop

if(e.detail.scrollTop > 500){

this.setData({

floorstatus: true

});

}else {

this.setData({

floorstatus: false

});

}

})

WXSS代碼：

bigWrap{

background:#eee;

}

/goTop回到頂部圖標(biāo)start/

.com-widget-goTop {

position: fixed;

bottom: 125px;

right: 5px;

background: rgba(0,0,0,0.48);

border-radius: 50%;

overflow: hidden;

z-index: 500;

}

.com-widget-goTop .icon-gotop{

background-color: rgba(0,0,0,0.8);

display: inline-block;

width: 50px;

height: 50px;

line-height: 68px;

font-size: 12px;

color: #ffffff;

text-align: center;

border-radius: 50%;

background: url(http://m.dev.vd.cn/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center -1110px;

-webkit-background-size: 50px auto;

}

微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡單

微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡單，只需要五步就可以完成，整個(gè)過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
微信小程序商城系統(tǒng)免費(fèi)注冊體驗(yàn)

微信小程序商城系統(tǒng)免費(fèi)注冊體驗(yàn)，接下來是微信小程序的時(shí)代，這一波紅利在不抓住互聯(lián)網(wǎng)就再也沒什么機(jī)會了...詳情

想了解更多微信小程序開發(fā)和微信小程序大全都可以進(jìn)入微信小程序商城系統(tǒng)開發(fā)了解。

第二部分：如何開通一個(gè)小商店

微信小程序回到頂部按鈕制作方式講解

微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡單

微信小程序商城系統(tǒng)免費(fèi)注冊體驗(yàn)