标签: html-framework-7

我是Framework7的新手,想知道如何发布到应用商店.我无法在Framework7网站上找到有关此信息.谢谢.

出于某种原因,当我在Framework7应用程序的移动网络版本中突出显示文本并触摸其他地方时,我希望突出显示消失...它将被保留.但是,在桌面Web上,当我突出显示文本并单击其他位置时,突出显示消失了.

在突出显示文本时,如何使移动网络像桌面网站一样？

我试图阻止touchstart上的默认,希望它能阻止默认保留或事件...但它可能是我缺少/没有得到的东西因为有或没有preventDefault它仍然是同样的问题.

$('.content').on('touchstart', function(e) {
   e.preventDefault();
});

非常感谢!

据我所知，截至上个月，Safari 已支持 CSS Grid。然而，当我加载带有网格容器的页面时，我的项目不会动态重复——它们占据了整个容器的宽度。

 .selection-container {
     margin: 50px;
     display: grid;
     grid-template-columns: repeat(3, auto);
     background: rgba(20, 20, 20, 0.6);
     border-style: inset;
     border-width: 2px;
     border-color: red;

 }

我的 html 看起来像这样：

<div id="categories-container"  v-show="selectedCategory==''" class="selection-container">      
<div v-for="(val, key) in categories" :key=key @click="selectedCategory=key">
    <f7-card :title="key" role="button" class="category"></f7-card>
</div>      
</div>

有什么我遗漏的步骤吗？

我想只在登录页面中正确隐藏面板和导航栏.登录后我想向他们展示.我部分地完成了这项任务,因为我的代码有不好的副作用.当我打开应用程序时,我看到了我的登录页面,但是几秒钟后,导航栏出现然后消失.我想在没有这种效果的登录页面上访问.我想立即看到没有它们的登录页面.我该如何解决？

我在index.html中声明了它们

 <div id="app">
    <div class="panel panel-left panel-cover">
        <div class="navbar color-theme-green ">
            <div class="navbar-inner sliding">
                <div class="title">Menu</div>
            </div>
        </div>
        <div class="block">
            <div class="list links-list">
                <ul>
                    <li>
                        <a href="/home/" class="panel-close">
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="f7-icons ios-only">graph_square</i>
                                    <i class="material-icons md-only">dashboard</i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">Home</div>
                                </div>
                            </div>
                        </a>
                    </li>                       
                    <li id="company" style="display:none;">
                        <a href="/company/" class="panel-close" >
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="f7-icons ios-only">home</i>
                                    <i class="material-icons md-only">home</i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">Company</div>
                                </div>
                            </div>
                        </a>    
                    </li>                       
                </ul>
            </div>
        </div>
    </div>
    <!-- Top …

我已经阅读了有关此问题的所有问题，但没有找到任何解决方案。

我正在使用当前最新版本的 Framework7 (3.5.2)，我正在尝试实现 pushState 语句以便在 Android 设备上启用 backButton。

在我的app.js我写了这个：

const app = new Framework7({
    root: '#app',
    name: conf.appName,
    version: conf.version,
    id: conf.id,
    theme: 'auto',
    panel: {
        swipe: 'left',
    },
    view: {
        pushState: true,
        //pushStateRoot: '',
        //pushStateSeparator: '#!',
      }
    })

如果我设置了pushState: false，应用程序就可以正常工作。如果我设置为true，应用程序会给我一个空白页（我已经尝试使用 xampp、electron 和 cordova，我得到了相同的结果）。

我错过了什么吗？Framework7 Doc 太令人困惑了..

如果 pushState 被窃听，还有其他解决方案可以在 android 上使用带有 Framework7 的 backButton 吗？

谢谢

我怎样才能使用ajax调用__CODE__,我已经知道如何使用ajax调用__CODE__但不知道如何进行调用__CODE__.我正在使用它来调用带有数据的API作为回报.

谢谢!

我使用framework7创建一个应用程序。现在，我尝试执行javascript我的page-content，但它不执行。

<div class="pages">
<div class="page  close-panel" data-page="item">
    <div class="page-content">
        <div class="content-block-title">Title</div>
        <script type="text/javascript">
          alert("testoutput"); // no alert
          console.log("TEST"); // no log
        </script>
    </div>
</div>

如何运行此javascript代码？

更新

该页面是从另一个HTML页面加载的。

我是一名网络开发人员,对我可以使用HTML5 + CSS构建的这些混合(或原生？)应用感到好奇.所以我决定尝试构建一个.

所以我对此完全陌生.(而且对CLI也不太满意.)

起初,我搜索了怎么做,并找到了可以将HTML5 + CSS转换为移动应用程序的PhoneGap.似乎很简单.

然后我需要一个框架,并找到了Mobile Angular JS.

我开始构建我的应用程序.但是当应用程序在桌面浏览器中正常工作但无法在移动应用程序的ngview中加载模板时会出现问题.这让我想知道Mobile Angular JS可能不是PhoneGap的完美搭档.

所以我搜索了哪些框架最适合PhoneGap,发现Ionic就是那样.但是当我在他们的文档中阅读它时,它让我感到困惑.似乎Ionic有自己的构建程序,使我的HTML成为一个可用的移动应用程序.

那么,当你已经拥有了Ionic的PhoneGap功能时,为什么Ionic与PhoneGap完美结合？

我糊涂了.

编辑:

经过几个小时的进一步阅读并收到更多评论后,我想我可以非常自信地确定Ionic不需要PhoneGap.而Ionic并不是测试PhoneGap的最佳框架.

使用Framework7似乎更容易.PhoneGap表示只是将Framework7 dist内容克隆到PhoneGap的www文件夹中.http://phonegap.com/blog/2015/11/30/framework7/

但是我有点担心,每次我想测试时我都必须做那个克隆吗？

也许我最终会使用jQuery Mobile ...

我想将分页项目符号从底部移动到查看区域的顶部。

<div class="swiper-container">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
</div>

目前，分页项目符号显示在所有包装器或 JavaScript 附加幻灯片内容下方。我希望它出现在上面。

更多信息：https : //framework7.io/docs/swiper.html#default-swiper-with-pagination

我目前正在构建的应用程序中出现此错误：

C:\mobile\xtern_mobile\ST>cordova run android
ANDROID_HOME=C:\Users\myPC\AppData\Local\Android\android-sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_66
Downloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip

Exception in thread "main" java.lang.RuntimeException: java.io.IOException: Server returned HTTP response code: 403 for URL: http://services.gradle.org/distributions/gradle-2.2.1-all.zip
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:78)
        at org.gradle.wrapper.Install.createDist(Install.java:47)
        at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:129)
        at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:48)
Caused by: java.io.IOException: Server returned HTTP response code: 403 for URL: http://services.gradle.org/distributions/gradle-2.2.1-all.zip
        at sun.net.www.protocol.http.HttpURLConnection.getInputStream0(HttpURLConnection.java:1840)
        at sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1441)
        at org.gradle.wrapper.Download.downloadInternal(Download.java:59)
        at org.gradle.wrapper.Download.download(Download.java:45)
        at org.gradle.wrapper.Install$1.call(Install.java:60)
        at org.gradle.wrapper.Install$1.call(Install.java:47)
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
        ... 3 more
CordovaError: Promise rejected with non-error: Error code 1 for command: cmd with args: /s,/c,"C:\mobile\xtern_mobile\ST\platforms\android\gradlew cdvBuildDebug -b C:\mobile\xtern_mobile\ST\platforms\android\build.gradle -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true" …