学习仿每日优鲜无法实现framegroup打开页面及跳转

qodomo

学习到视频第二章13节，界面跳转与窗口切换，完全按照讲解一步步跟随操作，也仔细核对了实现的代码与示例代码一致，也尝试了编译自定义loader,原来使用的APPloader, 但现在还是无法实现页面跳转，提示错误是：fnsetNavMenuIndex未定义，但实际上已经定义了，求指点：
代码如下：
<body>
  <header id="header">
<div class="left"tapmode>
   <div class="arrow" id="arrow"></div>
   <div class="city" id="city">北京市</div>
</div>
<div class="center"></div>
<div class="right"tapmode></div>
  </header>
  <nav id="nav">
   <div class="menu selected" tapmode="selected">水果</div>
   <div class="menu" tapmode="selected">食材</div>
   <div class="menu" tapmode="selected">零食</div>
   <div class="menu" tapmode="selected">牛奶</div>
   <div class="menu" tapmode="selected">蔬菜</div>
  </nav>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">

apiready = function() {

//  initEventListenner(); 这条是在讲解中未有的，但在示例的完成文件中有的，但添加或关闭后无影响，仍然打不开

  var header = $api.byId('header');
  var nav = $api.byId('nav');

  $api.fixStatusBar(header);

var headerH = $api.offset(header).h;
var navH = $api.offset(nav).h;
//获取所有的分类菜单
menus = $api.domAll(nav, '.menu');
//构造FrameGroup中的Frame数组
  var frames = [];
for ( var i=0 ; i < menus.length; i++){
      frames.push({    //push为js的一个方法，是向数组末尾添加新元素
         name: 'main_frame_' + i,
         url: './main_frame.html',
      })
}

//打开FrameGroup
   api.openFrameGroup({
      name: 'mainFrameGroup',
      scrollEnabled: true, //支持手手势滑动切换
      rect: {
            x: 0,
            y: headerH + navH,
            w: 'auto',
            h: 'auto'
      },
      index: 0,
      frames:frames
      //  preload:frames.length
   }, function(ret, err) {
      fnSetNavMenuSelected(ret.index);

   });
var menus;

function fnSetNavMenuIndex(index_) {
  fnSetNavMenuSelected(index_);
api.setFrameGroupIndex({
      name: 'mainFrameGroup',
      index: index_,
      scroll: true
});

}

function fnSetNavMenuSelected(index_) {
  for (var i = 0; i < menus.length; i++) {
if (index_ == i) {
   $api.addCls(menus[i] 'selected');
} else {
   $api.removeCls(menus[i], 'selected');

      }
   }
}

</script>

马浩川

fnSetNavMenuIndex函数写在apiready外面试试

qodomo

试了一下，还是不行，然后现在还有个问题，自定义loader无法连接，输入了IP，反复提示输入正确的IP, 这个自定义loader和APPloader能同时在模拟器和手机里存在吗，还是装了自定义的，必须把原来的APPloader删掉

qodomo

试了一下，还是不行，另外还有个问题，现在用刚安装的自定义loader无法连接，输入正确的IP，反复提示IP错误，是自定义和原来的APPloader不能在手机和模拟器中并存吗，必须把原来的APPloader删掉

qodomo

这个发帖网页可能也有点问题，点击完发送，就什么都没有了，也不更新，还以为刚输入的都丢了呢，就再发，然后一会又显示发来两遍

马浩川

qodomo 发表于 2020-3-18 14:40
试了一下，还是不行，另外还有个问题，现在用刚安装的自定义loader无法连接，输入正确的IP，反复提示IP错误 ...

不用

qodomo

想了一个歪招，把自己跟随操作的main.html改名，然后把示例文件中的main.html拷进来，但还是不行，错误提示一样？

马浩川

试试我的

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #333;
position: relative;
color: #fff;
}
header .city {
position: absolute;
top: 0;
left: 10px;
height: 50px;
line-height: 50px;
}
header h2 {
height: 50px;
line-height: 50px;
text-align: center;
}
header .login {
position: absolute;
top: 0;
right: 10px;
height: 50px;
line-height: 50px;
}
nav {
display: flex;
width: 100%;
height: 40px;
}
nav .menu {
flex: 1;
width: 100%;
height: 40px;
line-height: 40px;
background: pink;
color: #fff;
text-align: center;
}
nav .selected {
color: red;
font-weight: 700;
}
</style>
</head>
<body>
<header>
<div class="city" onclick="openCity()">
城市
</div>
<h2>每日优鲜</h2>
<div class="login" onclick="login()">
登录
</div>
</header>
<nav>
<div class="menu selected" tapmode onclick="fnSetNavMenuIndex(0)">水果</div>
<div class="menu" tapmode onclick="fnSetNavMenuIndex(1)">水果</div>
<div class="menu" tapmode onclick="fnSetNavMenuIndex(2)">moviePlayer</div>
<div class="menu" tapmode onclick="fnSetNavMenuIndex(3)">水果</div>
</nav>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
// 获取 ul 下的 li
var menus = $api.domAll('.menu');
// 定义空数组存放framesGroup 里的每个
var frames = [];
for (var i = 0; i < menus.length; i++) {
frames.push({
name: 'frame' + i,
url: './frame' + i + '.html',
bgColor: '#fff'
})
}
apiready = function() {
api.openFrameGroup({
name: 'mainFrameGroup',
scrollEnabled: true,
rect: {
x: 0,
y: 90,
w: 'auto',
h: 'auto'
},
index: 0,
bounces: true,
frames: frames
}, function(ret, err) {
//当index的值改变时又会执行该回调函数
// fnSetNavMenuSelected(ret.index);
});
};
// 点击不同的 meau 就会调用该函数改变index的值
function fnSetNavMenuIndex(index_) {
for (var i = 0; i < menus.length; i++) {
if (index_ == i) {
$api.addCls(menus[i], 'selected');
} else {
$api.removeCls(menus[i], 'selected');
}
}
api.setFrameGroupIndex({
name: 'mainFrameGroup',
index: index_
});
}
function fnSetNavMenuSelected(index_) {
// 次函数执行时会改变 meau的样式
};
function openCity() {
var cityList = api.require('cityList');
cityList.open({
currentCity: '北京',
resource: '../res/city.json'
}, function(ret, err) {
var cityInfo = ret.cityInfo;
});
}
function login() {
api.openWin({
name: 'login',
url: './login.html',
})
};
</script>
</html>

复制代码

qodomo

哇塞，您这个也太费心了，多谢，我试试

qodomo

试了一下，还是不行，不管怎样还是多谢您，我自己也再琢磨琢磨！

[其他] 学习仿每日优鲜无法实现framegroup打开页面及跳转