ミニプログラムは九公格インターフェースのナビゲーションを実現します

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

ミニプログラムは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の場合は、背景が空のグリッドを表示したいので、データがある場合は、背景付きのグリッドを表示したいので

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

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

<!--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>

テンプレートは import を使用して参照され、template と is は呼び出しが行われる場所で使用されます。is は cell.wxml 内の名前を指定します。 item[0]、item[1]、item[2]はループ内で渡されるデータ、cellHeightはindex.jsのデータに格納されているデータです。データがテンプレートに渡されると、フレームワークはそれをフィールド、つまりキーと値のペアの形式で展開します。そのため、cell.wxml ファイルをもう一度見ると、キーが内部でデータとして直接使用されていることがわかります。 。 データをインターフェースに提示した後、それに一致する特定のスタイルが必要です。index.wxss コードは次のとおりです。

/**index.wxss**/ 
.pages-container { 
 height: 100%; 
 display: flex; 
 flex-direction: column; 
 box-sizing: border-box; 
 padding-top: 10rpx; 
 padding-bottom: 10rpx; 
} 
.pages-title-bg { 
 width: 100%; 
} 
.pages-wrapper { 
} 
.pages-row { 
 width: 100%; 
 display: flex; 
 flex-direction: row; 
 justify-content: space-around; 
} 
.pages-item { 
 position: relative; 
 padding: 10rpx; 
 width: 33%; 
 background-color: #fff; 
 border: #ddd solid 1px; 
} 
.pages-icon-wrapper { 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin: 10rpx; 
 border-radius: 30%; 
 height: 75%; 
 background:#00CD0D; 
} 
.pages-icon-wrapper-no-bg { 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin: 10rpx; 
 height: 75%; 
} 
.pages-icon { 
 width: 100rpx; 
 height: 100rpx; 
} 
.pages-text-wrapper { 
 text-align: center; 
} 
.pages-text { 
 font-weight: bolder; 
}

効果は以下のとおりです

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

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat ミニ プログラム ページでのデータ操作と関数呼び出しの分析について

カードめくりゲームの WeChat ミニ プログラム バージョンの実装

WeChat ミニ プログラム文字関数に基づいて都市選択を実装します

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