跨平台app开发中的点击更新数据实例

需要实现的功能是点击一个ul下的li,实现页面的部分数据更新。

1.找到页面中将要点击的部分，并添加参数。

在需要点击部分加上一个a标签，并配置参数：

<script type="text/html" id="daily-temp">
<ul>
{{each list as value i}}
<a href="javascript:;" data-index={{i}}>
<li class="{{color[i]}}">
<div class="period-time">{{value.day}}</div>
<div class="period-date">{{value.date}}</div>
<div class="weaicon"><span class="mui-icon iconfont {{value.skyicon}}"></span></div>
<div class="thermometer" id="thermometer{{i}}"><span>{{value.min}}</span>°<span>/{{value.max}}</span>°</div>
</li>
</a>
{{/each}}
</ul>
</script>

2.动态绑定监听事件

在js文件中绑定监听事件，并获取点击的li的index,根据index来判断数据更新：

$("#daily-html").on("click", "a", function() {

var self = this;

var index = self.getAttribute("data-index");

weatherModule.detail24(weatherData, index);

});

（ 其中daily-html为显示模块DIV的id，index为获取到的li下标）

3.为调用函数设置参数来源

首先在js文件的定义一个全局的变量weatherData,在用此参数到数据接口中接受数据，达到带参函数的成功调用：

var weatherData = null;
....................................
url = "https://api.caiyunapp.com/v2/Y2FpeXVuIGFwaSB3ZWI/" + jw + "/forecast.json?callback=showLocation";
$.jsonp({
url: url,
callback: 'showLocation',
success: function(result) {

$(".wea-detailbox .wea-detail").text(result.result.hourly.description);
var newData = createDailyData(result);
if ("temperature" === id) {
weatherData = result;

4.在调用的函数中根据index来判断数据

传参并定义dayIndex变量：

function detail24(data, dayIndex) {

var dayIndex = dayIndex || 0,

逻辑判断，取到的数据在一个json数组中，使用数组名+slice()方法取下标，得到不同的数据:

if(dayIndex==0) {
newData = newData.slice(0,10);
}else{
newData = newData.slice(24,34);
}

最后测试，数据更新成功。

数据更新部分为图片最上部分十小时天气信息，星期四数据：



点击星期五后的数据：