WXML中{{}}无法读取data中的数据
我在js文件中的data里定义了一个变量，然而在wxml文件中却无法读到，并认为它不存在。
const cloudHelper = require('../helper/cloud_helper.js');
const pageHelper = require('../helper/page_helper.js');
const AdminMeetBiz = require('../biz/admin_meet_biz.js');
const MeetBiz = require('../biz/meet_biz.js');
const setting = require('../setting/setting.js');
module.exports = Behavior({
/**
* 页面的初始数据
*/
data: {
isLoad: false,
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
showMind: true,
showTime: false,
showPosition: false,
latitude: 30.664801,
longitude: 104.129919,
markers: [{
id: 1,
latitude: 30.664801,
longitude: 104.129919,
name: '成都'
}],
},
methods: {
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (!pageHelper.getOptions(this, options)) return;
this._loadDetail();
},
_loadDetail: async function () {
let id = this.data.id;
if (!id) return;
let params = {
id,
};
let opt = {
title: 'bar'
};
let meet = await cloudHelper.callCloudData('meet/view', params, opt);
if (!meet) {
this.setData({
isLoad: null
})
return;
}
this.setData({
isLoad: true,
meet,
canNullTime: setting.MEET_CAN_NULL_TIME
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: async function () {
await this._loadDetail();
wx.stopPullDownRefresh();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
bindJoinTap: async function (e) {
let dayIdx = pageHelper.dataset(e, 'dayidx');
let timeIdx = pageHelper.dataset(e, 'timeidx');
let time = this.data.meet.MEET_DAYS_SET[dayIdx].times[timeIdx];
if (time.error) {
if (time.error.includes('预约'))
return pageHelper.showModal('该时段' + time.error + '，换一个时段试试吧！');
else
return pageHelper.showModal('该时段预约' + time.error + '，换一个时段试试吧！');
}
let meetId = this.data.id;
let timeMark = time.mark;
let callback = async () => {
try {
let opts = {
title: '请稍候',
}
let params = {
meetId,
timeMark
}
await cloudHelper.callCloudSumbit('meet/before_join', params, opts).then(res => {
wx.navigateTo({
url: `../join/meet_join?id=${meetId}&timeMark=${timeMark}`,
})
});
} catch (ex) {
console.log(ex);
}
}
MeetBiz.subscribeMessageMeet(callback);
},
url: function (e) {
pageHelper.url(e, this);
},
onPageScroll: function (e) {
console.log(111)
if (e.scrollTop > 100) {
this.setData({
topShow: true
});
} else {
this.setData({
topShow: false
});
}
},
bindTopTap: function () {
wx.pageScrollTo({
scrollTop: 0
})
},
bindVerticalMainScroll: function (e) {
if (!this.data.isLoad) return;
let list = this.data.meet.MEET_DAYS_SET;
let tabHeight = 0;
for (let i = 0; i < list.length; i++) {
let view = wx.createSelectorQuery().in(this).select("#main-" + i);
view.fields({
size: true
}, data => {
list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
list[i].bottom = tabHeight;
}).exec();
}
let scrollTop = e.detail.scrollTop + 20; // + i*0.5; //TODO
for (let i = 0; i < list.length; i++) {
if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
this.setData({
verticalNavTop: (i - 1) * 50,
tabCur: i
})
return false;
}
}
},
bindTabSelectTap: function (e) {
let idx = pageHelper.dataset(e, 'idx');
this.setData({
tabCur: idx,
mainCur: idx,
verticalNavTop: (idx - 1) * 50
})
},
bindShowMindTap: function (e) {
this.setData({
showMind: true,
showTime: false,
showPosition:false,
});
},
bindShowTimeTap: function (e) {
this.setData({
showMind: false,
showTime: true,
showPosition:false,
});
},
bindShowPositionTap:function(e){
console.log("进入方法")
this.setData({
showMind:false,
showTime:false,
showPosition:true,
})
console.log(this.data)
console.log("值为", this.data.showPosition)
},
}
})
<template name="meetDetailTpl">
<view wx:if="{{isLoad===null}}" class="margin-top load notexist text-l load-project"></view>
<view wx:if="{{isLoad===false}}" class="margin-top load loading text-l load-project"></view>
<view wx:if="{{isLoad}}" class="main">
<view class="top-area">
<view class="top-title text-cut">{{meet.MEET_TITLE}}</view>
<view class="top-menu">
<view bindtap="bindShowMindTap" class="item {{showMind?'cur text-project':''}}"><text class="icon-friend margin-right-xxs"></text>{{skin.MEET_NAME}}须知</view>
<view bindtap="bindShowTimeTap" class="item {{showTime?'cur text-project':''}}"><text class="icon-remind margin-right-xxs"></text>可预约时段</view>
<view bindtap="bindShowPositionTap" class="item {{showPosition?'cur text-project':''}}"><text class="icon-location margin-right-xxs"></text>实时位置</view>
</view>
</view>
<view class="big-box">
<block wx:if="{{showMind}}">
<view class="article-box padding-project">
<view class="article card-project shadow-project margin-top" wx:if="{{meet.MEET_CONTENT && meet.MEET_CONTENT.length>0}}">
<block wx:for="{{meet.MEET_CONTENT}}" wx:key="key">
<view class="content" wx:if="{{item.type=='text'}}">
<text user-select="{{true}}">{{item.val}}</text>
</view>
<view class="pics" wx:if="{{item.type=='img'}}">
<image bindtap="url" data-type='img' data-url="{{item.val}}" show-menu-by-longpress="{{true}}" class="loading" mode='widthFix' lazy-load="true" src="{{item.val}}">
</image>
</view>
</block>
</view>
</view>
</block>
<block wx:if="{{showTime}}">
<view wx:if="{{!meet.MEET_DAYS_SET || meet.MEET_DAYS_SET.length == 0}}" class="meet-no-time text-grey">
<text class="icon-emoji"></text>
<view>暂无可预约时段，请选择其他</view>
</view>
<view wx:if="{{meet.MEET_DAYS_SET && meet.MEET_DAYS_SET.length > 0}}" class="vertical-box">
<!-- left begin -->
<scroll-view class="vertical-nav nav" scroll-y scroll-with-animation scroll-top="{{verticalNavTop}}" style="height:calc(100vh - 193rpx);">
<view class="item text-cut {{index==tabCur?'cur text-project':''}}" wx:for="{{meet.MEET_DAYS_SET}}" wx:key="key" bindtap='bindTabSelectTap' data-idx="{{index}}" wx:if="{{item.times.length>0||canNullTime}}">
{{item.day}}
</view>
</scroll-view>
<!-- left END -->
<!-- right begin -->
<scroll-view class="vertical-main" scroll-y scroll-with-animation style="height:calc(100vh - 193rpx)" scroll-into-view="main-{{mainCur}}" bindscroll="bindVerticalMainScroll">
<view class="vertical-main-box" wx:for="{{meet.MEET_DAYS_SET}}" wx:if="{{item.times.length>0||canNullTime}}" wx:key="key" id="main-{{index}}">
<view class="bar solid-bottom bg-white righ-tab-bar">
<view class="action right-tab-tilte text-black">
{{item.dayDesc}}
</view>
</view>
<!-- 时段列表 begin -->
<view class="text-list">
<view class="item text-grey" wx:if="{{item.times.length==0&&canNullTime}}">暂无可预约时段</view>
<view class="item" bindtap="bindJoinTap" data-dayidx="{{index}}" data-timeidx="{{idx}}" wx:for="{{item.times}}" wx:key="key" wx:for-item="itm" wx:for-index="idx">
<view class="time-text limit {{itm.error?'error':''}}">
<text>{{itm.start}}～{{itm.end}}</text>
<block wx:if="{{!itm.error}}">
<text wx:if="{{meet.MEET_IS_SHOW_LIMIT==1&&itm.isLimit}}" class="limit-text">({{itm.stat.succCnt}}<text style="margin:0 5rpx">/</text>{{itm.limit}})</text>
<text wx:if="{{meet.MEET_IS_SHOW_LIMIT==1&&!itm.isLimit}}" class='limit-text'>(人数不限)</text>
<text wx:if="{{meet.MEET_IS_SHOW_LIMIT==0}}" class='limit-text'>(可预约)</text>
</block>
<block wx:else><text class="limit-text">({{itm.error}})</text></block>
</view>
</view>
</view>
<!-- 时段列表 END -->
</view>
</scroll-view>
<!-- right END -->
</view>
</block>
<block wx:if="{{!showMind&&!showTime}}">
<text>showMind：{{showMind}}</text>
<text>showPosition:{{showPosition||'不存在'}}</text>
<view class="page-section page-section-gap">
<!-- <map
id="myMap"
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="markers" show-location >
</map> -->
</view>
<!-- <image src="../../images/default_cover_pic.jpg" style="width: 100%; height: 300px;"></image> -->
</block>
</view>
</view>
<!-- top begin -->
<button wx:if="{{topShow}}" class="btn-fixed bg-gray text-gray btn-top" bindtap="bindTopTap" style="bottom:60rpx"><text class="icon-top"></text></button>
<!-- top END. -->
</template>
经过多次调试，发现原来是模板的问题，人家的这个项目采用了模板，所以模板上没有引入变量的话，在具体页面上，定义的变量也就无法被读取到。
我感觉不是不存在，是因为他是false，你可以直接打印不要加判断
- 这篇博客: js实现排行榜(根据我微信小程序项目所分享)完整版中的 wxml 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
<view class="hot-list"> <view class="books" wx:for="{{hotList}}" wx:key="index"> <image src="{{item.img}}"></image> <view class="books-right"> <view class="books-title"> <view>{{item.title}}</view> <view>{{index + 1}}</view> </view> <view class="books-introduce">[{{item.status}}]{{item.introduce}}</view> <view class="book-B"> <view>{{item.author}}</view> <view> <text>{{item.category}}</text> </view> </view> </view> </view> </view>