注册 登录
珈蓝寺的夜枭
珈蓝寺的夜枭
  • 发布：2016-03-02 10:48
  • 更新：2016-11-22 20:31
  • 阅读：3360

scroll区域滚动 设置scrollto||scrolltobuttom不起作用 【mui+touchTouch相册显示 最后是能用的代码】

分类：MUI 
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <meta name="viewport"  content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" />  
        <link rel="stylesheet" href="css/mui.min.css" />  
        <link rel="stylesheet" href="assets/css/styles.css" />  
        <link rel="stylesheet" href="assets/touchTouch/touchTouch.css" />  
        <link rel="stylesheet" href="fonts/iconfont.css" />  

        <style type="text/css">  
         header{  
            background:#5ab2e0;  
        }  
         .mui-title{  
                color:white;  
        }  
         .mui-content{  
            /*background: red;*/  
            /*overflow: scroll;   
            -webkit-overflow-scrolling: touch;*/  
         }  
         .thumbs aAddPic{  
                width:120px;  
                height:120px;  
                display:inline-block;  
                border:7px solid #303030;  
                box-shadow:0 1px 3px rgba(0,0,0,0.5);  
                border-radius:4px;  
                margin: 6px 6px 40px;  
                position:relative;  
                text-decoration:none;  
                background-position:center center;  
                background-repeat: no-repeat;  
                background-size:cover;  
                -webkit-background-size:cover;  
            }  

            .thumbs aAddPic:after{  
                background-color: #303030;  
                border-radius: 7px;  
                bottom: -126px;  
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);  
                color: #FFFFFF;  
                content: attr(title);  
                display: inline-block;  
                font-size: 10px;  
                max-width: 90px;  
                overflow: hidden;  
                padding: 2px 10px;  
                position: relative;  
                text-align: center;  
                white-space: nowrap;  
            }  
    </style>      

    </head>  

    <body>  
        <script id='main-template' type="text/template">  
            <div class="thumbs" data-gallery="myGallery" style="">  
                <% for(var i in data){var item = data[i];%>  
                     <a  class="thumbsItem" href=<%=(item.href)%> style="background-image:url(<%=(item.content)%>)" title=<%=(item.timeSpan)%> key=<%=(i)%> ></a>  
                <% } %>   
                <aAddPic  id="extendGallary" href="assets/touchTouch/iconfont-icontianjiatupian.png"  style="background-image:url(assets/touchTouch/iconfont-icontianjiatupian.png)" title="点击添加" ></a>  
            </div>  
        </script>  
        <header class="mui-bar mui-bar-nav ">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>  
        <h1 class="mui-title">个人相册</h1>  
        </header>  

                <div id="scrollArea" class="mui-content mui-scroll-wrapper">  
                        <div id="main-list" class="mui-scroll">  
                        <!--  
                            描述：此处加载模板main-template  
                         -->   
                        </div>  
               </div>  

        <script src="assets/js/jquery-1.7.1.min.js"></script>  
        <script src="assets/touchTouch/touchTouch.jquery.js"></script>  
        <script type="text/javascript" src="js/mui.min.js"></script>  
        <script type="text/javascript" src="js/arttmpl.js"></script>  
        <script type="text/javascript">  
            /* DOM Elem */  
            var divScrollArea = document.getElementById("scrollArea");  

            var myGallery = [];  
            mui.init({  
                  gestureConfig:{  
                        longtap: true, //默认为false  
                  }  
            });  

            var listBreHeight = 0;  
            var listCurHeight = 0;  
            function loadMyGallery(){  
                var galleryItem0 = {  
                            href   :"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                            content:"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                            timeSpan:"2015-12-11"  
                }  
                var galleryItem1 = {  
                            href   :"http://farm6.staticflickr.com/5346/7051537899_efc7a44830_z.jpg",  
                            content:"http://farm6.staticflickr.com/5346/7051537899_efc7a44830_m.jpg",  
                            timeSpan:"2015-12-11"  
                }  
                var galleryItem2 = {  
                            href   :"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                            content:"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                            timeSpan:"2015-12-11"  
                }  
                var galleryItem3 = {  
                            href   :"file:///storage/sdcard0/DCIM/Camera/5.jpg",  
                            content:"file:///storage/sdcard0/DCIM/Camera/5.jpg",  
                            timeSpan:"2015-12-11"  
                }  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem1);  
                myGallery.push(galleryItem2);  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem0);  
                myGallery.push(galleryItem0);  
//              myGallery.push(galleryItem3);  
                //aert("hello:"+myGallery[0].href+" "+myGallery[0].content);  

            }  

            function galleryToView(){  
                document.getElementById('main-list').innerHTML = template('main-template', {  
                    data:myGallery  
                });  

                var GalleryCollection = document.getElementsByTagName("a");  
                    if(GalleryCollection){  
                        for(var i = 0 ;i < GalleryCollection.length ;i++){  
                        GalleryCollection[i].addEventListener("longtap",function(){  
                                plus.nativeUI.confirm("确定删除相册图片?", function(event) {  
                      if(event.index == 1){  
                        var ItemKey = this.Key;  
                        myGallery.splice(parseInt(ItemKey),1);  
                        galleryToView();  

                        jQuery.getScript("assets/touchTouch/touchTouch.jquery.js",function(){  
                            jQuery('.thumbs a').touchTouch();  
                        });  
                      }  
                        }, "", ["取消","确定"]);  
                        },false);  

                        }  
                    }  

                    var btnExtendGallery = document.getElementById("extendGallary");  
                    if(btnExtendGallery){  
                            btnExtendGallery.addEventListener('tap',extendGallery,false);  
                    }  

            }  

            function extendGallery(){  
                var btnArray = [{  
                    title: "拍照"  
                    }, {  
                    title: "从相册选择"  
                    }];  

                plus.nativeUI.actionSheet({  
                    title: "选择照片",  
                    cancel: "取消",  
                    buttons: btnArray  
                }, function(e) {  
                    var index = e.index;  
                    switch (index) {  
                        case 0:  
                            break;  
                        case 1:  
                            var cmr = plus.camera.getCamera();  
                            cmr.captureImage(function(path) {  

                                 onPlusReady("file://" + plus.io.convertLocalFileSystemURL(path));  

                            }, function(err) {});  
                            break;  
                        case 2:  
                            plus.gallery.pick(function(galleryItemPath) {  
                                //alert("gallary:"+galleryItemPath);  
                                var newGalleryItem = {  
                                        href :galleryItemPath,  
                                     content :galleryItemPath,  
                                    timeSpan :"2015-11-24"  
                                };  
                                myGallery.push(newGalleryItem);  
                                galleryToView();  
                                jQuery.getScript("assets/touchTouch/touchTouch.jquery.js",function(){  
                                    jQuery('.thumbs a').touchTouch();  
                                });  
                                galleryUpload();  

                                var t1 = document.getElementById("main-list");  
                                var t2 = document.getElementById("extendGallary");  
                                listCurHeight = t1.clientHeight;  
                                console.log("scroll height:"+divScrollArea.clientHeight);  
                                console.log("list:"+t1.clientHeight);  
                                console.log("elem:"+t2.clientHeight);  
                                console.log("WindowHeight:"+ plus.screen.resolutionHeight);  
                                var difHeight = listCurHeight - listBreHeight;  
                                if(t1.clientHeight > plus.screen.resolutionHeight)  
                                {  
                                    mui('.mui-scroll-wrapper').scroll().scrollTo(0,difHeight,100);//100毫秒滚动到顶  
                                }  
                                listBreHeight = listCurHeight;  
                            }, function(err) {}, null);  
                            break;  
                    }//switch--end  
                });  
            }  

            loadMyGallery();  
            galleryToView();  
            var t = jQuery('.thumbs a');  
            jQuery('.thumbs a').touchTouch();  
//          mui('.mui-scroll-wrapper').scroll({  
//              indicators: false //是否显示滚动条  
//          });  
            var t1 = document.getElementById("main-list");  
            listBreHeight = t1.clientHeight;  
            console.log("scroll height:"+divScrollArea.clientHeight);  
            mui('.mui-scroll-wrapper').scroll().scrollTo(0,-100);     **-- ** Problem Here**  
//          mui(".mui-scroll-wrapper").scroll().scrollToBottom();  

        galleryUpload = function(){  
            //do picture upload  
        }  
        mui('.mui-scroll-wrapper').scroll().scrollTo(0,500,100);  
        </script>  

    </body>  
</html>

这个相册显示&&操作界面 应为我想有个图片加载的控件在最下面我想每次加载的时候页面加载到底部显示，但是设置了滚动函数，没反应呢？

/ New Page Page Code Here /
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/mui.min.css" />
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/touchTouch/touchTouch.css" />
<link rel="stylesheet" href="fonts/iconfont.css" /> 

    <style type="text/css">  
     header{  
        background:#5ab2e0;  
    }  
     .mui-title{  
            color:white;  
    }  
     .mui-content{  
         background:url('assets/img/tile.jpg') repeat #a0c5d1;  
     }  
     .thumbs aAddPic{  
            width:120px;  
            height:120px;  
            display:inline-block;  
            border:7px solid #303030;  
            box-shadow:0 1px 3px rgba(0,0,0,0.5);  
            border-radius:4px;  
            margin: 6px 6px 40px;  
            position:relative;  
            /*float:left;*/  
            text-decoration:none;  
            background-position:center center;  
            background-repeat: no-repeat;  
            background-size:cover;  
            -webkit-background-size:cover;  
        }  

        .thumbs aAddPic:after{  
            background-color: #303030;  
            border-radius: 7px;  
            bottom: -120px;  
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);  
            color: #FFFFFF;  
            content: attr(title);  
            display: inline-block;  
            font-size: 10px;  
            max-width: 90px;  
            overflow: hidden;  
            padding: 2px 10px;  
            margin-left: 25px;  
            position: relative;  
            text-align: center;  
            white-space: nowrap;  
        }  
</style>      

</head>  

<body>  
    <script id='main-template' type="text/template">  
        <div class="thumbs" data-gallery="myGallery" style="">  
            <% for(var i in data){var item = data[i];%>  
                 <a  class="thumbsItem" href=<%=(item.href)%> style="background-image:url(<%=(item.content)%>)" title=<%=(item.timeSpan)%> key=<%=(i)%> ></a>  
            <% } %>   
            <aAddPic  id="extendGallary" class="thumbsItem" href="assets/touchTouch/iconfont-icontianjiatupian.png"  style="background-image:url(assets/touchTouch/iconfont-icontianjiatupian.png)" title="点击添加" ></a>  
        </div>  
    </script>  
    <header id="header" class="mui-bar mui-bar-nav ">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;" title="hello"></a>  
    <h1 class="mui-title">个人相册</h1>  
    </header>  

            <div id="scrollArea" class="mui-content mui-scroll-wrapper">  
                    <div id="main-list" class="mui-scroll">  
                    <!--  
                        描述：此处加载模板main-template  
                     -->   
                    </div>  
           </div>  

    <script src="assets/js/jquery-1.7.1.min.js"></script>  
    <script src="assets/touchTouch/touchTouch.jquery.js"></script>  
    <script type="text/javascript" src="js/mui.min.js"></script>  
    <script type="text/javascript" src="js/arttmpl.js"></script>

<script type="text/javascript">
mui.plusReady(function(){
/ DOM Elem /
var divScrollArea = document.getElementById("scrollArea");
var divHeader = document.getElementById("header"); 

        /* Globle Var */  
        var myGallery = [];  

        /* screen configure */  
        mui.init({  
              gestureConfig:{  
                    longtap: true, //默认为false  
              }  
        });  

        mui('.mui-scroll-wrapper').scroll({  
            indicators: false //是否显示滚动条  
        });  

        function loadMyGallery(){  
            var galleryItem0 = {  
                        href   :"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                        content:"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                        timeSpan:"2015-12-11"  
            }  
            var galleryItem1 = {  
                        href   :"http://farm6.staticflickr.com/5346/7051537899_efc7a44830_z.jpg",  
                        content:"http://farm6.staticflickr.com/5346/7051537899_efc7a44830_m.jpg",  
                        timeSpan:"2015-12-11"  
            }  
            var galleryItem2 = {  
                        href   :"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                        content:"http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg",  
                        timeSpan:"2015-12-11"  
            }  
            var galleryItem3 = {  
                        href   :"file:///storage/sdcard0/DCIM/Camera/5.jpg",  
                        content:"file:///storage/sdcard0/DCIM/Camera/5.jpg",  
                        timeSpan:"2015-12-11"  
            }  
            myGallery.push(galleryItem0);  
            myGallery.push(galleryItem1);  
            myGallery.push(galleryItem2);

// myGallery.push(galleryItem0);
// myGallery.push(galleryItem0);
// myGallery.push(galleryItem0); 

        }  

        function galleryToView(){  
            document.getElementById('main-list').innerHTML = template('main-template', {  
                data:myGallery  
            });  
            var GalleryCollection = document.getElementsByTagName("a");  

                if(GalleryCollection){  
                    for(var i = 0 ;i < GalleryCollection.length ;i++){  
                        if(GalleryCollection[i].classList.contains("mui-pull-left")){  
                            continue; //返回描点处理  
                        }  
                        GalleryCollection[i].addEventListener("longtap",function(){  
                            plus.nativeUI.confirm("确定删除相册图片?", function(event) {  
                                if(event.index == 1){  
                                    var ItemKey = this.Key;  
                                    myGallery.splice(parseInt(ItemKey),1);  
                                    galleryToView();  
                                    jQuery.getScript("assets/touchTouch/touchTouch.jquery.js",function(){  
                                        jQuery('.thumbs a').touchTouch();  
                                    });  
                              }  
                            }, "", ["取消","确定"]);  
                        },false);  
                    }  
                }  
                var galleryElement = document.getElementsByClassName("thumbsItem");  
                for(var i=0;i<galleryElement.length;i++){  
                    galleryElement[i].style.marginLeft = (plus.screen.resolutionWidth-240)/3 + "px";  
                }  

                var btnExtendGallery = document.getElementById("extendGallary");  
                if(btnExtendGallery){  
                        btnExtendGallery.addEventListener('tap',extendGallery,false);  
                }  
        }  
        // 添加相册图片  
        function extendGallery(){  
            var btnArray = [{  
                title: "拍照"  
                }, {  
                title: "从相册选择"  
                }];  

            plus.nativeUI.actionSheet({  
                title: "选择照片",  
                cancel: "取消",  
                buttons: btnArray  
            }, function(e) {  
                var index = e.index;  
                switch (index) {  
                    case 0:  
                        break;  
                    case 1:  
                        var cmr = plus.camera.getCamera();  
                        cmr.captureImage(function(path) {  

                             onPlusReady("file://" + plus.io.convertLocalFileSystemURL(path));  

                        }, function(err) {});  
                        break;  
                    case 2:  
                        plus.gallery.pick(function(galleryItemPath) {  
                            //alert("gallary:"+galleryItemPath);  
                            var newGalleryItem = {  
                                    href :galleryItemPath,  
                                 content :galleryItemPath,  
                                timeSpan :"2015-11-24"  
                            };  
                            myGallery.push(newGalleryItem);  
                            galleryToView();  
                            jQuery.getScript("assets/touchTouch/touchTouch.jquery.js",function(){  
                                jQuery('.thumbs a').touchTouch();  
                            });  
                            galleryUpload();  
                            mui('.mui-scroll-wrapper').scroll().scrollToBottom();  
                        }, function(err) {}, null);  
                        break;  
                }//switch--end  
            });  
        }  

        loadMyGallery();  
        galleryToView();  
        jQuery('.thumbs a').touchTouch();  
        galleryUpload = function(){  
        }  
        mui('.mui-scroll-wrapper').scroll().scrollToBottom();  

    });//PlusReady --end

</script>

</body>
</html>

下面的图片是效果勒 ^_^.

2016-03-02 10:48 负责人:无 分享

没有找到相关结果

    已邀请:
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    发个可直接运行的测试工程

    2016-03-02 13:34 分享

    • 珈蓝寺的夜枭 (作者)

      我把 scrollto的位置换了个地方，结果就行了，果然是很神奇的东西呢，感谢楼上的小哥，你懂得三，我是爱你的！

      2016-03-02 15:42

    • 云钦

      代码可读性太差。scrollto换到哪里了呢

      2016-08-29 22:13

    评论 取消
    1***@qq.com

    1***@qq.com

    请问有示例Demo吗？

    2016-11-22 20:31 分享
    评论 取消
    为什么被折叠? 0 个回复被折叠

    该问题目前已经被锁定, 无法添加新回复

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报