|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要介紹了微信小程序 歡迎界面開發的實例詳解的相關資料,這里實現歡迎界面的簡單實例和實現代碼及實現效果圖,需要的朋友可以參考下微信小程序 歡迎界面 市面上大多數的app都會有一個歡迎界面,下面將演示如何通過微信小程序實現一個歡迎界面。 下面將會按照以下的順序介紹: 布局的實現 邏輯的實現 樣式的實現 1.布局的實現 整個布局使用swiper滑動視圖實現,滑動視圖的每一個item通過一個block塊包裹,塊中包裹的是滑動視圖的每一個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}}" >立即體驗</button>
</swiper-item>
</block>
</swiper>2.邏輯的實現 在data中準備了一個imgs數組,數組中存放了3個圖片的地址,這里還有一個start函數,該函數用來監聽界面上button的點擊事件。 wx.navigateTo這個api的作用就是實現界面的跳轉并有返回的按鈕,url是用來指定跳轉的界面
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.樣式的實現 swiper樣式是定義滑動控件的樣式:滑動控件的位置為絕對布局,寬和高為占滿整個屏幕 .swiper-image樣式是定義image圖片的樣式:寬和高為占滿整個屏幕,透明度為0.9 .button-img樣式是定義button按鈕的樣式:位置為絕對布局,離底部90px,透明度為0.6,..
swiper {
/*這個是絕對布局*/
position: absolute;
height: 100%;
width: 100%;
}
.swiper-image {
height: 100%;
width: 100%;
/*透明度*/
opacity:0.9;
}
.button-img{
/*這個是絕對布局*/
position: relative;
bottom: 90px;
height: 40px;
width: 120px;
opacity:0.6;
}4.看效果
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 以上就是關于微信小程序 歡迎界面開發的介紹的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!