Foxtable(狐表)用户栏目专家坐堂 → 基于panel做页面到底部自动加载


  共有4543人关注过本帖树形打印复制链接

主题:基于panel做页面到底部自动加载

帅哥哟,离线,有人找我吗?
zhangjian222200
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
基于panel做页面到底部自动加载  发帖心情 Post By:2017/3/22 14:06:00 [显示全部帖子]

想基于foxtable高级版的panel功能,做一个页面,支持手机屏幕上滑加载10行
因为官方不支持上滑,自己不会,所以想找个高手帮做一下这个功能,技术上可行么?

图片点击可在新窗口打开查看此主题相关图片如下:qq图片2017888.png
图片点击可在新窗口打开查看


[此贴子已经被作者于2017/3/29 9:47:42编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/22 19:57:00 [显示全部帖子]

楼上的文档,\jquery使用\lib,文件夹里面test.js的代码如下:
$(document).ready(function() {
            $(window).scroll(function() {
                //$(document).scrollTop() 获取垂直滚动的距离
                //$(document).scrollLeft() 这是获取水平滚动条的距离
                if ($(document).scrollTop() <= 0) {
                    alert("滚动条已经到达顶部为0");              ’看了楼上例子,说明本楼js代码可以判断页面到达顶部
                                                                             问题是:如何将这句代码改成返回一个值?是否需要使用页面调用,如何调用?
                                                                             当页面里获得这个返回值时,加载上面的panel行
                }


                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    alert("滚动条已经到达底部为" + $(document).scrollTop());    ’大体同上
                }
            });
        });
[此贴子已经被作者于2017/3/22 20:01:12编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/26 17:45:00 [显示全部帖子]

下面是移动开发文档的内容,如何结合6楼的例子,当原有页面到达最下方,插入新页面呢?
如何在没有按钮的情况下,触发插入加载?

1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"ajaxform.js",文件内容为:

fun_ction tongji(){
    v_ar re_sult = sub_mitAjaxForm('form1','',fal_se);
    docu_ment.get_ElementById("p1").inner_HTML=re_sult;
}

2、HttpReqquest事件代码:
Select Case e.Path
    Case "test.htm"
        Dim wb As New weui
        wb.AddForm("","form1","tongji.htm")
        With wb.AddInputGroup("form1","ipg1",
"
销售统计")
            .AddSelect(
"
水平分组","水 平分组","产品|客户|雇员")
            .AddSelect(
"
垂直分组","垂直分组","产品|[客户]|雇员")
            
.AddSelect("统计列","统计列","数量|金额")
        
End With
        With wb.AddButtonGroup("form1","btg1",True)            ’这里怎么调整?
            .Add("btn1", 
"
统计", "button").Attribute= ""
        End With

        wb.AppendHTML("<div id='p1' style='margin:0.5em'></div>"
'
插入一个div,用于显示服务器返回的 页面
        wb.AppendHTML("<script src='./lib/ajaxform.js'></script>"
'
引入脚本文件
        e.WriteString(wb.Build)
    Case "tongji.htm"
        Dim wb As New weui
        ******
        Else
        ******
        End If
        e.WriteString(wb.Build)

End
 Select
[此贴子已经被作者于2017/3/26 17:45:14编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/29 9:43:00 [显示全部帖子]

目标:页面滑动到底部加载新页面
页面:per_tayaoqing.htm,按5楼例子做了,打开此页面,滑动到底部没有插入新页面

内容多,担心帖子发布后,部分内容被屏蔽,所以同样内容,也放在记事本里,发上了
Dim e As RequestEventArgs = args(0)                             'TA邀请我
Select Case e.Path
    Case "per_tayaoqing.htm"
        Dim wb As New WeUI
        wb.AppendHTML("<script src='./lib/jquery-1.9.1.js'></script>") '引入脚本文件
        With wb.AddTabBar("", "tb1", 1)                            '使用TabBar,增加4个按钮(注:页面可以增加,但不考虑)
            .AddButton("bt1","首页","./images/a.png","http://www.foxtable.com")
            .AddButton("bt2","记录","./images/b.png","http://www.foxtable.com")
            .AddButton("bt3","设置","./images/c.png","http://www.foxtable.com")
            .AddButton("bt4","我的","./images/d.png","/personal.htm")
            .Attribute = "style='height:55px'"
        End With
        Dim txt As String = "24岁,未婚,连云港,有红包"
        With wb.AddPanelGroup("","pg1","TA邀请我列表")
            '.Add("pn1","编号:20170322001",txt,"./images/a.png","http://www.foxtable.com") '超链接
            With .Add("pn2","邀请编号:2017032233001",txt,"./images/m.png") '带子链接
                .AddFoot("已发起:3天18时")
                .AddFoot("|状态:尚未决定","http://www.foxtable.com")
            End With
            With .Add("pn3","邀请编号:2017032233001",txt,"./images/m.png") '带子链接
                .AddFoot("已发起:3天18时")
                .AddFoot("|状态:尚未决定","http://www.foxtable.com")
            End With
            With .Add("pn4","邀请编号:2017032233001",txt,"./images/m.png") '带子链接
                .AddFoot("已发起:3天18时")
                .AddFoot("|状态:尚未决定","http://www.foxtable.com")
            End With
            With .Add("pn5","邀请编号:2017032233001",txt,"./images/m.png") '带子链接
                .AddFoot("已发起:3天18时")
                .AddFoot("|状态:尚未决定","http://www.foxtable.com")
            End With
            With .Add("pn6","邀请编号:2017032233001",txt,"./images/m.png") '带子链接
                .AddFoot("已发起:3天18时")
                .AddFoot("|状态:尚未决定","http://www.foxtable.com")
            End With
            With .Add("pn7","邀请编号:2017032233001",txt,"./images/m.png") '带子链接
                .AddFoot("已发起:3天18时")
                .AddFoot("|状态:尚未决定","http://www.foxtable.com")
            End With
        End With
        wb.AppendHTML("<script src='./lib/ajaxform_tayaoqing.js'></script>") '引入脚本文件
        e.WriteString(wb.Build) '生成网页
End Select
这是js代码(例子中的jquery-1.9.1.js也放在文件夹下了):
function jiazai(){           //声明加载函数
    var result = submitAjaxForm('pg1','',false);
    document.getElementById("p1").innerHTML=result;
}
$(document).ready(function() {
            $(window).scroll(function() {
                //$(document).scrollTop() 获取垂直滚动的距离
                //$(document).scrollLeft() 这是获取水平滚动条的距离
                //if ($(document).scrollTop() <= 0) {
                    //alert("滚动条已经到达顶部为0"); 
                //}
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    //alert("滚动条已经到达底部为" + $(document).scrollTop()); 
                  function jiazai()
                }
            });
        });
这是需要插入到底部的页面:p_tayaoqing.htm
Dim e As RequestEventArgs = args(0)                             'TA邀请我_辅助
Select Case e.path
Case "p_tayaoqing.htm"
        Dim wb As New weui
        Dim txt As String = "24岁,未婚,连云港,有红包"
        With wb.AddPanelGroup("","pg1","TA邀请我列表")
            '.Add("pn1","编号:20170322001",txt,"./images/a.png","http://www.foxtable.com") '超链接
            With .Add("pn10","邀请编号:2017032233001",txt,"./images/m.png") '带子链接
                .AddFoot("已发起:3天18时")
                .AddFoot("|状态:尚未决定","http://www.foxtable.com")
            End With
        End With
        e.WriteString(wb.Build)
End Select
 下载信息  [文件大小:   下载次数: ]
图片点击可在新窗口打开查看点击浏览该文件:1110ss.txt



 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/29 12:03:00 [显示全部帖子]

看了半天,firefox也安装了,还是想不通啊

这里建议做个完整例子,因为想要做的人应该不少的!来回问,不如用完整例子解决!
[此贴子已经被作者于2017/3/29 12:05:00编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/29 12:15:00 [显示全部帖子]

到底部弹出alert对话框,接着弹出对话框,被调用函数的alert没有执行

图片点击可在新窗口打开查看此主题相关图片如下:qq图片20170329120926999.png
图片点击可在新窗口打开查看
这是现在的js文件:
 下载信息  [文件大小:   下载次数: ]
图片点击可在新窗口打开查看点击浏览该文件:ajaxform_tayaoqing.zip



 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  7楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/29 14:27:00 [显示全部帖子]

我看了,可以这样理解么?
16楼:sendAjaxText,用另外一个页面,利用httprequest事件的e.PlainText,返回每个panel所需的文字,比如:年龄、地址等等,
17楼:接受完整页面,将16楼的内容作为完整的页面,插入到浏览器底部

 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  8楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/29 19:26:00 [显示全部帖子]

1.移动文档sendAjaxTextget,如果返回的是二维数组,JSON.parse()如何处理result?
2.对文档网页部分做了调整,有几个问题,麻烦看看

为防止官方系统屏蔽,代码也贴在附件记事本内
function getUser(){
    var result = sendAjaxText("getUser","accept.htm","",false);
    var user=JSON.parse(result);
    result="
姓名:" + user.name + "<br/>" + "年龄:" + user.age
    document.getElementById("p1").innerHTML=result;
}

Select Case e.Path
    Case "test.htm"
        Dim wb As New weui
        wb.AddForm("","form1","test.htm")
        With wb.AddButtonGroup("form1","btg1",True)  '垂直排列
            .Add("btn1", "getUser","button").Attri-bute="on-click='get-User()'"
            .Add("btn2", "getDate","button").Attri-bute="on-click='get-Date()'"
        End With
        wb.AppendHTML("<div id='p1' style='margin:0.5em'></div>") '插入一个div,用于显示服务器返回的数据
        wb.AppendHTML("<script src='./lib/ajaxform.js'></script>") '引入脚本文件
        e.WriteString(wb.Build) '生成网页
    Case "accept.htm"
        Select e.PlainText   
            Case "getUser" '发送jason数据------这里有修改,还请看看,问题写在下面了
                Dim username As String = e.cookie("UserName") '从cookie取用户名
                Dim count As String = 0 '定义发送次数,为每次发送3个人做准备(测试时,只发3个人)
                If e.Cookies.ContainsKey("jiezhi") Then '如果cookie有数量,从cookie获得截至目前发送数量
                    count = e.Cookie("jiezhi")
                End If
                Dim drs As List(of DataRow) = DataTables("订单").sqlSelect("[用户名] = 'username'","购买日期 DESC")  '从订单表找,个人订单集合
                Dim bary(1,2)As String  '定义返回的二维数组
                For i As Integer = 0 To 1 '二维数组的第0维
                    For j As Integer = 0 To 2 '二维数组的第1维
                        For Each dr As DataRow In drs '将集合内的每一行的"姓名"\"年龄"列,赋值给二维数组
                            count = count + 1
                            If j=0 Then
                                bary(i,j)= dr(count).cols("姓名")
                            End If
                            If j=1 Then
                                bary(i,j) = dr(count).cols("年龄")
                            End If
                            If (count Mod 3)=0 AndAlso i=1 AndAlso  j=2 Then
                                e.AppendCookie("jiezhi",count,30)    '将截至目前发送数量,保存到cookie,设置当离开网页时,删除cookie,问:如果不设置时间,用户离开时本页,今日其他页面,是否cookie即失效?
                                break '终止执行怎么写?
                            End If
                        Next
                    Next
                Next
                '  Dim s1(1,2) As String = {{"张三","20"},{"李四","25"},{"王二","21"}}    '本行为问问题专设:二维数组在foxtable里,可以粉色部分这样表达?
                e.WriteString(bary(1,2))
            Case "getDate" '发送纯文本  ---这里没有修改
                e.Writestring(CUDate(Date.Today))
        End Select
End Select
 下载信息  [文件大小:   下载次数: ]
图片点击可在新窗口打开查看点击浏览该文件:90hhttyu.txt


[此贴子已经被作者于2017/3/29 22:31:44编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  9楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/29 22:04:00 [显示全部帖子]

我用数组形式写在20楼了

如何改写成字符串如 "值1-值2|值3-值4"?

这种方式,我还见过,可能方便些

 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  10楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:七尾狐 帖子:1528 积分:10778 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/3/30 10:06:00 [显示全部帖子]

这是移动文档sendAjaxText的内容,问题是下面的粉色字体

1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"ajaxform.js",文件内容为:

function getDate(){
    var result = sendAjaxText("getDate","accept.htm","",false);
    document.getElementById("p1").innerHTML="
今天日期:<br/>" + result;
}

function getUser(){
    var result = sendAjaxText("getUser","accept.htm","",false);
    var user=JSON.parse(result);
    result="
姓名:" + user.name + "<br/>" + "年龄:" + user.age
    document.getElementById("p1").innerHTML=result;
}

2、HttpRequest事件代码:

Dim fl As String = "d:\web\" & e.path
If
 filesys.FileExists(fl)
    Dim idx As Integer = fl.LastIndexOf(".")
    Dim ext As String  = fl.SubString(idx)
    Select Case ext
        Case ".jpg",".gif",".png",".bmp",".wmf",".js",".css" ,".html",".htm",".zip",".rar"
            e.WriteFile(fl)
            Return '这里必须返回
    End 
Select
End
 If
Select
 Case e.Path
    Case "test.htm"
        Dim wb As New weui
        wb.AddForm("","form1","test.htm")
        With wb.AddButtonGroup("form1","btg1",True)  '垂直排列
            .Add("btn1""getUser","button").Attribute=""
            .Add("btn2""getDate","button").Attribute=""
        End With
        wb.AppendHTML("<div id='p1' style='margin:0.5em'></div>"'插入一个div,用于显示服务器返回的数据 
        wb.AppendHTML("<script src='./lib/ajaxform.js'></script>"'引入脚本文件
        e.WriteString(wb.Build) '生成网页
    Case "accept.htm"
        Select e.PlainText
            Case "getUser" '发送jason数据

                Dim jo As New JObject
                jo
("name") = "李云龙"
                jo
("age") = "36"
                jo
("card") = New JObject
                jo
("card")("bank") = "工行"
                jo
("card")("account") = "12345678"
                
Dim v As String =CompressJson(jo).ToString()
                问题:在这里生成并压缩json,在哪里解析这段json呢?js文件应该怎么调整?
                e.WriteString(v)
            Case "getDate" '发送纯文本
                e.Writestring(CUDate(Date.Today))
        End 
Select
End
 Select

[此贴子已经被作者于2017/3/30 10:17:15编辑过]

 回到顶部
总数 20 1 2 下一页