ミニプログラム開発のためのナビゲーションのコード実装 Jiugongge インターフェイス

この記事では、主に小規模なプログラム開発の実践、つまり九公歌インターフェースを実装するナビゲーションのコード実装について紹介します。興味のある方はぜひ学んでください。

ミニプログラムはWeChat上で開発されており、より使いやすくするために、ナビゲーションとして9マスのグリッドインターフェースを使用したいことがよくあります。

単純に考えると、九公グリッドは3行3列で、行を単位として各行を3列に分割すれば大丈夫でしょうか？実践してみましょう。

まず、9 グリッド データの生成について考えてみましょう。ジャンプを容易にするために、各グリッドにはアイコン、タイトル、ルートが必要です。そのため、1 次元配列 を定義できます。後続の構成をより適切に実行するために、この配列をファイル Routes.js に分割し、index.js ページでそれを参照し、インデックス ディレクトリにルートを配置します。

var PageItems = 
 [ 
  { 
   text: '格子1', 
   icon: '../../images/c1.png', 
   route: '../c1/c1', 
  }, 
  { 
   text: '格子2', 
   icon: '../../images/c2.png', 
   route: '../c2/c2', 
  }, 
   { 
   text: '格子3', 
   icon: '../../images/c3.png', 
   route: '../c3/c3', 
  }, 
  { 
   text: '格子4', 
   icon: '../../images/c4.png', 
   route: '../c4/c4', 
  }, 
  { 
   text: '格子5', 
   icon: '../../images/c5', 
   route: '../c5/c5', 
  }, 
  { 
   text: '格子6', 
   icon: '../../images/c6.png', 
   route: '../c6/c6', 
  }, 
  { 
   text: '格子7', 
   icon: '../../images/c7.png', 
   route: '../c7/c7', 
  }, 
  { 
   text: '格子8', 
   icon: '../../images/c8', 
   route: '../c8/c8', 
  }, 
  { 
   text: '格子9', 
   icon: '../../images/c9.png', 
   route: '../c9/c9', 
  } 
 ]; 
module.exports = { 
 PageItems: PageItems 
}

index.js のページでは、routes.js を参照して、データの PageItem を取得していますが、PageItem は 1 次元の配列であり、これまでの考え方では 1 行 3 列をグループとして使用していたため、この 1 次元配列を変換する必要があります。再結合する最も直接的な方法は、配列を生成することです。各配列要素には 3 つの要素のみを含む 1 次元配列が含まれます。コードは次のとおりです

//index.js 
//获取应用实例 
var app = getApp() 
var routes = require('routes'); 
Page({ 
 data: { 
  userInfo: {}, 
  cellHeight: '120px', 
  pageItems: [] 
 }, 
 //事件处理函数 
 onLoad: function () { 
  var that = this 
  console.log(app); 
  //调用应用实例的方法获取全局数据 
  app.getUserInfo(function (userInfo) { 
   wx.setNavigationBarTitle({ 
    title: '全新测试追踪系统-' + userInfo.nickName, 
    success: function (res) { 
     // success 
    } 
   }) 
   that.setData({ 
    userInfo: userInfo 
   }) 
   var pageItems = []; 
   var row = []; 
   var len = routes.PageItems.length;//重组PageItems 
   len = Math.floor((len + 2) / 3) * 3; 
   for (var i = 0; i < len; i++) { 
    if ((i + 1) % 3 == 0) { 
     row.push(indexs.PageItems[i]); 
     pageItems.push(row); 
     row = []; 
     continue; 
    } 
    else { 
     row.push(indexs.PageItems[i]); 
    } 
   } 
   wx.getSystemInfo({ 
    success: function (res) { 
     var windowWidth = res.windowWidth; 
     that.setData({ 
      cellHeight: (windowWidth / 3) + &#39;px&#39; 
     }) 
    }, 
    complete: function () { 
     that.setData({ 
      pageItems: pageItems 
     }) 
    } 
   }) 
  }) 
 } 
})

index.wxml に配置します。各グリッドは同じですが、データが異なるため、テンプレートを使用して表示することを考えました。この目的のために、まずセル テンプレート サーフェイス cell.wxml を作成します。

<template name="cell"> 
 <navigator url="{{route}}" class="pages-item" style="height:{{cellHeight}}"> 
  <view class="{{text==null||text.length==0?&#39;pages-icon-wrapper-no-bg&#39;:&#39;pages-icon-wrapper&#39;}}" > 
   <image src="{{icon}}" class="pages-icon"></image> 
  </view> 
  <view class="pages-text-wrapper"> 
   <text class="pages-text">{{text}}</text> 
  </view> 
 </navigator> 
</template>

ここでは、外部から渡されるデータが 2 つの中括弧で囲まれており、その後、変更を容易にするために内部で単純な論理的判断が行われることがわかります。プレゼンテーション。たとえば、text==nullの場合、背景が空のグリッドを表示したいので、データがある場合、背景付きのグリッドを表示したいので、

コードは次のようになります。このインターフェイス ファイルはテンプレートとして機能するため、テンプレートが参照されている場所で呼び出しを識別できるように、テンプレート タグでラップし、名前を付ける必要があります。 ここで、index.wxml でこのテンプレートを参照します

"{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".

テンプレートは import を使用して参照され、template と is は呼び出しが行われる場所で使用されます。is は cell.wxml 内の名前を指定します。 item[0]、item[1]、item[2]は

loop

で渡されるデータ、cellHeightはindex.jsのデータに格納されているデータです。データがテンプレートに渡されると、

フレームワークはそれをフィールドの形式、つまりキーと値のペアで展開します。そのため、cell.wxml ファイルをもう一度見ると、キーが次のように直接使用されていることがわかります。内部のデータ。 データをインターフェースに提示した後、それに一致する特定のスタイルが必要です。index.wxssのコードは次のとおりです。

<!--index.wxml--> 
<import src="cell.wxml" /> 
<view class="pages-container"> 
 <scroll-view scroll-y="true" class="pages-wrapper"> 
  <view wx:for="{{pageItems}}" wx:key="{{text}}"> 
   <view class="pages-row"> 
    <template is="cell" data="{{...item[0],cellHeight}}" /> 
    <template is="cell" data="{{...item[1],cellHeight}}" /> 
    <template is="cell" data="{{...item[2],cellHeight}}" /> 
   </view> 
  </view> 
 </scroll-view> 
</view>

効果は以下のとおりです

このテンプレートでは、ナビゲーター要素を使用してグリッドを表示するため、各グリッドを自然にナビゲートできます。

以上がミニプログラム開発のためのナビゲーションのコード実装 Jiugongge インターフェイスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。