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

这篇具有很好参考价值的文章主要介绍了小程序学习基础(首页展示)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序学习基础(首页展示),小程序基础学习,微信小程序,微信开发,微信文章来源地址https://www.toymoban.com/news/detail-791202.html

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

一 在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
}

到了这里,关于小程序学习基础(首页展示)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小白学习微信小程序的数据请求和数据展示

    微信小程序的数据请求和数据展示是开发小程序中非常重要的一部分,本文将通过一个案例来详细介绍如何进行数据请求与展示。 在开始之前,需要确保已经安装了微信小程序的开发工具,并且已经注册了一个小程序的账号。如果还没有,请先完成这些步骤。 我们将使用一

    2024年04月25日
    浏览(23)
  • 基于微信小程序的作品集展示的设计与开发(源码+lw+部署文档+讲解等)

    💗 博主介绍 :✌新人博主,工作经验两年+、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末获取源码+数据库🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人 基于微信小程序的作品集展示平

    2024年02月04日
    浏览(35)
  • 【UniApp开发小程序】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】

    【说明】 界面中商品的图片来源于闲鱼,若侵权请联系删除 关于商品分类页面的实现,请在我的Uniapp系列文章中寻找来查看 关于页面中悬浮按钮的实现,请在我的Uniapp系列文章中寻找来查看 该工具类的作用是,给定一个图片的url地址,计算出图片的高宽比,计算高宽比的作

    2024年02月13日
    浏览(35)
  • 微信小程序首页设计

    1. 实现效果 2. 轮播 indicator-dots= “true” | “false” 1. 实现效果 2. 上图下字 flex-direction: row | row-reverse | column | column-reverse; row(默认):主轴水平方向,起点在左端; row-reverse:主轴水平方向,起点在右端; column:主轴垂直方向,起点在上边沿; column-reserve:主轴垂直方向,

    2024年02月09日
    浏览(27)
  • 微信小程序之首页搭建

    小程序开发与实战 学习视频: https://www.bilibili.com/video/BV1Gv411g7j6?p=9spm_id_from=pageDriver 实现导航栏和tabBar。tabBar看下图: 参考文档: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 所有的属性对应的信息都可以在参考文档里面查看。 导航栏 app.json文件,内容是一

    2024年02月09日
    浏览(28)
  • 微信小程序之后台首页交互

    目录 一.与后台数据进行交互request封装 后台准备 测试结果 ​编辑   前端  测试结果  二.wxs的介绍以及入门  测试结果 后台准备 pom.xml文件编写 建立数据表 建立数据请求地址类  定义接口类  测试结果    前端 先关闭mock    先编写url地址  编写utils.js 编写index.js   编写

    2024年02月08日
    浏览(34)
  • 微信小程序制作日常生活首页

    这里有源代码+图片 CSDN社区地址直达:http://t.csdn.cn/NEeOT 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 1、需要配置导航栏的效果(在app.json中进行配置 在windows中配置) 2、配置tabBar效果(在app.json中进行配置、需要额外增加tabBar)

    2024年02月10日
    浏览(30)
  • 【易售小程序项目】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】

    【说明】 界面中商品的图片来源于闲鱼,若侵权请联系删除 关于商品分类页面的实现,请在我的Uniapp系列文章中寻找来查看 关于页面中悬浮按钮的实现,请在我的Uniapp系列文章中寻找来查看 该工具类的作用是,给定一个图片的url地址,计算出图片的高宽比,计算高宽比的作

    2024年02月09日
    浏览(34)
  • 微信小程序:微信小程序中首页onLoad()函数加载两次问题(已解决)

    我在学习微信小程序的开发的过程中,在学到云开发时,首页要加载服务器数据,发现onLoad函数被加载了两次,如图 然后来搜,发现问题出在了onShow函数这,这个函数只有在此页面第一次加载时才会被调用,而这个函数里不知道什么时候加上了这行代码 this.onLoad() (可能是开

    2024年02月16日
    浏览(28)
  • 微信小程序首页-----布局(详细教程赶快收藏吧)

                                                      🎬 艳艳耶✌️:个人主页                                                   🔥 个人专栏 :《Spring与Mybatis集成整合》《Vue.js使用》                                                   ⛺️ 越努力 ,越幸运

    2024年02月04日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包