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

2017-06-14

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

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

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

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

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

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

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

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

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

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

// 容器滾動(dòng)時(shí)將此時(shí)的滾動(dòng)距離賦值給 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)開(kāi)發(fā)其實(shí)很簡(jiǎn)單

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

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

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

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

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

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

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