小程序学习基础(首页展示)

原理通过首页展示的方式设置一个按钮,然后点击按钮跳转到相应的页面即可。

一 在js中定义一个需要展示页面的数组

二 在页面中使用fou循环来遍历其中的数据,并展示出来

页面代码

复制代码
<!--index.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class="pages">
  <block wx:for="{{pages}}" wx:key="name">
    <button type="primary" bindtap="go" data-item="{{item}}"> {{item.name}}</button>
   </block>
 </view>

// index.js
Page({
  data: {
   "pages" :[
     { name :"one" , path :"/pages/one/one"},
     { name :"two" , path :"/pages/two/two"},
     { name :"three" , path :"/pages/three/three"},
     { name :"four" , path :"/pages/four/four"}
    ]
  },

  // 跳转到tabBar页面
go: function (event) {
  console.log(event)
  const item = event.target.dataset.item
  wx.navigateTo({
    url: item.path,
  })
}
  
})

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  },
  "component": true
}
相关推荐
赵庆明老师37 分钟前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
FliPPeDround6 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
@二十六9 小时前
微信小程序订阅消息工具封装,兼容一次性订阅和长期订阅
微信小程序·小程序·订阅消息
用力的活着11 小时前
uniapp 微信小程序蓝牙接收中文乱码
微信小程序·小程序·uni-app
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
笨笨狗吞噬者1 天前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
性能优化·微信小程序·uni-app
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
爱隐身的官人1 天前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
计算机徐师兄1 天前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐1 天前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序