html5选项卡下拉刷新,mui中选项卡切换加下拉刷新,怎么样实现点击的效果

代码如下

ui中的li是动态添加的,我现在想点击li把id传到别下一个页面上去,但是加了点击事件不行,点不过去,求大神指教,我是新手,刚接触hbuilder还没有一个月

Hello MUI

html,

body {

background-color: #efeff4;

}

.mui-bar~.mui-content .mui-fullscreen {

top: 44px;

height: auto;

}

.mui-pull-top-tips {

position: absolute;

top: -20px;

left: 50%;

margin-left: -25px;

width: 40px;

height: 40px;

border-radius: 100%;

z-index: 1;

}

.mui-bar~.mui-pull-top-tips {

top: 24px;

}

.mui-pull-top-wrapper {

width: 42px;

height: 42px;

display: block;

text-align: center;

background-color: #efeff4;

border: 1px solid #ddd;

border-radius: 25px;

background-clip: padding-box;

box-shadow: 0 4px 10px #bbb;

overflow: hidden;

}

.mui-pull-top-tips.mui-transitioning {

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

.mui-pull-top-tips .mui-pull-loading {

/*-webkit-backface-visibility: hidden;

-webkit-transition-duration: 400ms;

transition-duration: 400ms;*/

margin: 0;

}

.mui-pull-top-wrapper .mui-icon,

.mui-pull-top-wrapper .mui-spinner {

margin-top: 7px;

}

.mui-pull-top-wrapper .mui-icon.mui-reverse {

/*-webkit-transform: rotate(180deg) translateZ(0);*/

}

.mui-pull-bottom-tips {

text-align: center;

background-color: #efeff4;

font-size: 15px;

line-height: 40px;

color: #777;

}

.mui-pull-top-canvas {

overflow: hidden;

background-color: #fafafa;

border-radius: 40px;

box-shadow: 0 4px 10px #bbb;

width: 40px;

height: 40px;

margin: 0 auto;

}

.mui-pull-top-canvas canvas {

width: 40px;

}

.mui-slider-indicator.mui-segmented-control {

background-color: #efeff4;

}

最新

组队

问答

mui.init();

(function($) {

//阻尼系数

var deceleration = mui.os.ios ? 0.003 : 0.0009;

$('.mui-scroll-wrapper').scroll({

bounce: false,

indicators: true, //是否显示滚动条

deceleration: deceleration

});

var zxlist;

var phlist;

var wdlist;

mui.plusReady(function() {

var self1 = plus.webview.currentWebview();

var zx = self1.zxid;

var ph = self1.phid;

var wd = self1.wdid;

var zxfirst = true;

var wdfirst = true;

var phfirst = true;

zxlist = document.getElementById("zxlist");

phlist = document.getElementById("phlist");

wdlist = document.getElementById("wdlist");

zxdown(zx);

zxlist.addEventListener('tap', function() {

zxdown(zx);

});

wdlist.addEventListener('tap', function() {

wddown(wd);

});

phlist.addEventListener('tap', function() {

phdown(ph);

});

//循环初始化所有下拉刷新,上拉加载。

$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {

$(pullRefreshEl).pullToRefresh({

down: {

callback: function() {

var self = this;

setTimeout(function() {

// var ul = self.element.querySelector('.mui-table-view');

// ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);

self.endPullDownToRefresh();

}, 1000);

}

},

up: {

callback: function() {

var self = this;

setTimeout(function() {

// var ul = self.element.querySelectorAll('.mui-table-view');

// ul.appendChild(createFragment(ul, index, 5));

self.endPullUpToRefresh();

}, 1000);

}

}

});

});

var li;

var fragment = document.createDocumentFragment();

var createFragment = function(ul, index, count, reverse) {

return fragment;

}

var createtime;

function zxdown(tid, page) {

mui.ajax(Url.ip + Url.getLmBy, {

data: {

tid: tid,

cpage: page

},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: 10000, //超时时间设置为10秒;

success: function(data) {

var result = data.rows;

console.log(JSON.stringify(data));

for (var i = 0; i < result.length; i++) {

console.log(JSON.stringify(result[i]));

li = document.createElement('li');

createtime = (result[i].createtime + "").substring(0, 10);

li.innerHTML = '

' +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

'

' +

result[i].title +

// '

' +

// '能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?' +

// '

' +

'

' +

createtime +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

result[i].hf +

'' +

'' +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

result[i].hp +

'' +

'' +

'

' +

'

' +

'' +

'

';

fragment.appendChild(li);

}

if (zxfirst) {

var list = document.getElementById("zxdiv");

var self = $(list);

var ul = document.getElementById("zxul");

ul.insertBefore(createFragment(ul, 0, 10, true), ul.firstChild);

zxfirst = false;

}

},

error: function(xhr, type, errorThrown) {}

});

}

function wddown(tid, page) {

mui.ajax(Url.ip + Url.getLmBy, {

data: {

tid: tid,

cpage: page

},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: 10000, //超时时间设置为10秒;

success: function(data) {

var result = data.rows;

console.log(JSON.stringify(data));

for (var i = 0; i < result.length; i++) {

console.log(JSON.stringify(result[i]));

li = document.createElement('li');

createtime = (result[i].createtime + "").substring(0, 10);

li.innerHTML = '

' +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

'

' +

result[i].title +

'

' +

createtime +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

result[i].hf +

'' +

'' +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

result[i].hp +

'' +

'' +

'

' +

'

' +

'' +

'

';

fragment.appendChild(li);

}

if (wdfirst) {

var list = document.getElementById("wddiv");

var self = $(list);

var ul = document.getElementById("wdul");

ul.insertBefore(createFragment(ul, 1, 10, true), ul.firstChild);

wdfirst = false;

}

},

error: function(xhr, type, errorThrown) {}

});

}

function phdown(tid, page) {

mui.ajax(Url.ip + Url.getLmBy, {

data: {

tid: tid,

cpage: page

},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: 10000, //超时时间设置为10秒;

success: function(data) {

var result = data.rows;

console.log(JSON.stringify(data));

for (var i = 0; i < result.length; i++) {

console.log(JSON.stringify(result[i]));

li = document.createElement('li');

createtime = (result[i].createtime + "").substring(0, 10);

li.innerHTML = '

' +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

'

' +

result[i].title +

'

' +

createtime +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

result[i].hf +

'' +

'' +

'' +

''%20+%20Url.home%20+%20Url.icon%20+%20result%5Bi%5D.icon%20+%20'' +

result[i].hp +

'' +

'' +

'

' +

'

' +

'' +

'

';

fragment.appendChild(li);

}

if (phfirst) {

var list = document.getElementById("phdiv");

var self = $(list);

var ul = document.getElementById("phul");

ul.insertBefore(createFragment(ul, 2, 10, true), ul.firstChild);

phfirst = false;

}

},

error: function(xhr, type, errorThrown) {}

});

}

function opennew(id) {

mui.openWindow({

url: 'shequ_xingqing.html',

id: 'info.html',

extras: {

cid: id

}

});

}

});

})(mui);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值