wxml頁面
利用三目運算:代碼如下:
1 <image src="{{ima?ima:'../../images/4.jpg'}}" />
(../../images/4.jpg)這里意思是預加載圖片大概是一張黑白色的類似於
js代碼如下:
Page({
/**
* 頁面的初始數據
*/
data: {
ima: "",
},
/**
* 生命周期函數--監聽頁面加載
*/
internet:function(){
setTimeout(function(){
this.setData({
/*setData*/是為了模擬服務器傳輸的數據
ima:'http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg',
})
}.bind(this),2000);
},
onLoad:
function (options) {
this.
internet()
/*調用*/
},
// app.YoniClient.request(app.Func.LOGIN,)
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady:
function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow:
function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide:
function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload:
function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh:
function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom:
function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage:
function () {
}
})
那么如果是以數組形式的話也非常簡單:
wxml代碼
<image src='{{item.images?item.images:"../../../images/sketch_169_102.jpg"}}' class='news_list_img' mode='widthFix'></image>
因為數組的話要用到參數item可能其他
js代碼如下:
Page({ /** * 頁面的初始數據 */ data: { items: [{ title: "第一屆少兒足球比賽", txt: "第一屆鄭州足球比賽開幕式z乒啟動計划", time: "2017年11月20日", images: '', }, { title: "第一屆少兒足球比賽", txt: "第一屆鄭州足球比賽開幕式z乒啟動計划", time: "2017年11月22日", images: '', }], ite: [{ title: "第一屆少兒足球比賽", txt: "第一屆鄭州足球比賽開幕式z乒啟動計划", time: "2017年11月20日", images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg", }, { title: "第一屆少兒足球比賽", txt: "第一屆鄭州足球比賽開幕式z乒啟動計划", time: "2017年11月22日", images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg", }] }, /** * 生命周期函數--監聽頁面加載 */ internet: function () { let ite = this.data.ite; setTimeout(function () { this.setData({ items: ite, }) }.bind(this), 2000); }, onLoad: function (options) {
this.internet()
}, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })
setData是為了實例化數據目的為了能夠放在頁面將ite模擬數據賦值給定義的ite(名字隨便定義)既然是數據就會有data,bind的目的是為了捆綁,后面的數字是時間間隔多少秒顯示要加載出來的數據
本人原創博客希望大家提出意見: