微信小程序 歡迎界面開發(fā)的實(shí)例詳解
微信小程序 歡迎界面
市面上大多數(shù)的app都會(huì)有一個(gè)歡迎界面,下面將演示如何通過微信小程序?qū)崿F(xiàn)一個(gè)歡迎界面。
下面將會(huì)按照以下的順序介紹:
布局的實(shí)現(xiàn)
邏輯的實(shí)現(xiàn)
樣式的實(shí)現(xiàn)
1.布局的實(shí)現(xiàn)
整個(gè)布局使用swiper滑動(dòng)視圖實(shí)現(xiàn),滑動(dòng)視圖的每一個(gè)item通過一個(gè)block塊包裹,塊中包裹的是滑動(dòng)視圖的每一個(gè)item, item中包含image圖片和button按鈕
<swiper indicator-dots="true"> <block wx:for="{{imgs}}" wx:for-index="index"> <swiper-item class="swiper-items" > <image class="swiper-image" src="{{item}}"></image> <button class="button-img" bindtap="start" wx:if="{{index == imgs.length - 1}}" >立即體驗(yàn)</button> </swiper-item> </block> </swiper>
2.邏輯的實(shí)現(xiàn)
在data中準(zhǔn)備了一個(gè)imgs數(shù)組,數(shù)組中存放了3個(gè)圖片的地址,這里還有一個(gè)start函數(shù),該函數(shù)用來監(jiān)聽界面上button的點(diǎn)擊事件。
wx.navigateTo這個(gè)api的作用就是實(shí)現(xiàn)界面的跳轉(zhuǎn)并有返回的按鈕,url是用來指定跳轉(zhuǎn)的界面
Page({ data:{ imgs:[ "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60", "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60", "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60", ], img:"http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg", }, start(){ wx.navigateTo({ url: '../home/home' }) // wx.redirectTo({ url: '../index/index' }) }, })
3.樣式的實(shí)現(xiàn)
swiper樣式是定義滑動(dòng)控件的樣式:滑動(dòng)控件的位置為絕對布局,寬和高為占滿整個(gè)屏幕
.swiper-image樣式是定義image圖片的樣式:寬和高為占滿整個(gè)屏幕,透明度為0.9
.button-img樣式是定義button按鈕的樣式:位置為絕對布局,離底部90px,透明度為0.6,..
swiper { /*這個(gè)是絕對布局*/ position: absolute; height: 100%; width: 100%; } .swiper-image { height: 100%; width: 100%; /*透明度*/ opacity:0.9; } .button-img{ /*這個(gè)是絕對布局*/ position: relative; bottom: 90px; height: 40px; width: 120px; opacity:0.6; }
4.看效果
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
13個(gè)JavaScript 一行程序,讓你看起來就是個(gè)專家
JavaScript 可以做很多好玩的事, 從復(fù)雜的框架到處理API,有太多的東西需要學(xué)習(xí)。但是,它也能讓我們只用一行就能做一些了不起的事情。今天的文章小編就為大家介紹13 個(gè)JavaScript 行程序,需要的朋友可以參考下2021-08-08詳解requestAnimationFrame和setInterval該如何選擇
這篇文章主要為大家介紹了requestAnimationFrame和setInterval該如何選擇示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-03-03微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)(一)
這篇文章主要介紹了微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-05-05微信小程序 本地?cái)?shù)據(jù)存儲(chǔ)實(shí)例詳解
這篇文章主要介紹了微信小程序 本地?cái)?shù)據(jù)存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas
這篇文章主要為大家介紹了JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas可視化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08