欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序啟動(dòng)頁的實(shí)現(xiàn) - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們在追求其視覺表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序啟動(dòng)頁的實(shí)現(xiàn)

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：42

加班偷著懶沒做一堆九月份迭代的工作，實(shí)現(xiàn)了一下小程序的啟動(dòng)頁。效果是這樣的：

app.json

將啟動(dòng)頁路徑放在pages數(shù)組的第一項(xiàng)，tabBar中l(wèi)ist正常放置。

start.wxml
先寫一個(gè)容器顯示背景圖片，image標(biāo)簽上使用bindload方法，動(dòng)態(tài)計(jì)算屏幕寬高，以適應(yīng)不同手機(jī)端的尺寸，讓背景圖更佳顯示。
for='{{testList}}' wx:for-item="item" wx:key="item">    
<image src="{{item.fileID}}" bindload="autoImage" style="width:{{imgWidth}};height:{{ imgHeight }}" />view>
用戶信息展示，整體用容器包起來，做成絕對定位。open-data 標(biāo)簽可以免權(quán)限直接拿到用戶的昵稱頭像等信息，只需要指定相應(yīng)的type即可。
class="userinfo">    
<view class="userinfo-avatar">        
<open-data type="userAvatarUrl">open-data>    
view>    
<view class="userinfo-name">        
<text>{{msg}}text>        
<open-data type="userNickName">
open-data>    
view>    
<button hover-class="btn_red" class="btn" bindtap="goToIndex">進(jìn)入店鋪button>        
view>
start.wxss
進(jìn)入店鋪按鈕有一個(gè)懸停效果，使用hover-class定義一個(gè)目標(biāo)效果的class。

start.js
autoImage 方法如下，歡迎白嫖。
autoImage(e) 
{    
var that = this;    
var originalWidth = e.detail.width;    
var originalHeight = e.detail.height;    
var imageWidth = 0;    
var imageHeight = 0;    
wx.getSystemInfo({        complete: (res) => 
{            
var winWidth = res.windowWidth;            
if (originalWidth > winWidth) 
{                
var autoWidth = winWidth;                
var autoHeight = (autoWidth * originalHeight) / originalWidth;                
imageWidth = autoWidth + 'px';                
imageHeight = autoHeight + 'px';            
} 
else {                
imageWidth = originalWidth + 'px';                
imageHeight = originalHeight + 'px';            
}            
that.setData({                
imgWidth: imageWidth,                
imgHeight: imageHeight           
 });        
}    
})},
進(jìn)入店鋪按鈕上綁定的事件，直接調(diào)用微信api，tab頁跳轉(zhuǎn)。
goToIndex() {    
wx.switchTab({        
url: '/pages/index/index',   
 });},

相關(guān)案例查看更多