微信小程序-筆記
小程序動態引入圖片:
var index = this //當前賦值
wx.request({
url: ‘http://192.168.2.107:8080/carserver/appuser/banners.do‘, //僅為示例,並非真實的接口地址
data: {
x: ‘‘,
y: ‘‘
},
method:"post",
header: {
‘content-type‘: ‘application/json‘
},
success: function (res) { //打印後發現是數組,for循環
var arr = [] //定義一個數組
for (var i = 0; i < res.data.list.length;i++ ){
var ourl = res.data.list[i].url
arr[i] = "http://192.168.2.107:8080/carserver/appdownload/download/" + ourl //賦值數組
// console.log(arr[i])
}
index.setData({ //把數組添加到data裏面
imgUrls: arr
})
}
})
子頁面獲取全局的app.js 文件
var app = getAPP();
點擊跳轉頁面:
1,
<navigator url="../../pages/logs/logs">
<view>點擊我跳轉到下一個頁面</view>
</navigator>
首先對text 設置監聽事件
<view bindtap="toast" class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
然後對該text 設置事件跳轉。
//事件處理函數 點擊text
toast: function() {
wx.navigateTo({
url: ‘../blueberry/blueberry‘
})
},
2,
wx.navigateTo(OBJECT)
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
微信小程序請浮動:
1,.clearfix {
overflow: auto;
_height: 1%;
}
2,.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
導航跳轉 // 類似a標簽
<navigator url=""></navigator>
邊框:
border-left-width:;
border-left-style:;
border-left-color:;
左右布局:
display:flex;
justify-content:space-between; //顯示左右
align-items:center; //行高居中
居中布局:
display:flex; //彈性盒子模型
flex-wrap:wrap; //換行
flex-direction: row; //橫向排序
justify-content:center; //居中顯示
兩端對齊中間居中:
display: flex;
justify-content:space-between;
跳轉登錄頁: wx.redirectTo
橫向滑動: scroll-view_H
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 300rpx;
}
計時器:
var that = this;
setTimeout(function(){
that.setData({})
},3000)
滑塊:
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
<view id="green" class="scroll-view-item_H bc_green">
<view class="div1"></view>
<view class="div2"></view>
</view>
</scroll-view>
文本溢出隱藏:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
後臺交互 數組
data:{
mess:[‘1‘] //數組
}
var that = this;
wx.onSocketMessage(function(res){
var arr = that.data.mess //前面的數組
arr.push(res.data)
that.setData({
mess:arr
})
})
三元運算:
<view hidden="{{ hide ==1 ? ‘active‘:‘‘ }}"></view>
微信小程序-筆記