1. 程式人生 > >微信小程序-筆記

微信小程序-筆記

a標簽 div 當前 white 左右 橫向滑動 微信 cat head

小程序動態引入圖片:

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>

微信小程序-筆記