小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发

2024-05-20 13:25:18

一、常用组件

在上一个章节中讲解了封装请求数据的模块，在此处请求轮播图的数据

1.首页轮播图数据的请求以及渲染

1.1 轮播图数据的请求 pages/home/home.js

import

2 使用组件 - 视图容器 - swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。属性表如下

在pages/home/home.wxml文件中输入如下代码查看效果

<!--

二、自定义组件 - 产品列表

1.自定义组件的布局

components/prolist/prolist.wxml

2.自定义组件的样式

components/prolist/prolist.wxss

/* components/prolist/prolist.wxss */

3.首页请求数据，并且传递给子组件

pages/home/home.js

import

pages/home/home.wxml

4.子组件接收数据

components/prolist/prolist.js

Component

5.子组件渲染数据

components/prolist/prolist.wxml

三、实现下拉刷新上拉加载

1.开启首页的下拉刷新功能

pages/home/home.json

2.完善相关的下拉刷新函数

pages/home/home.js

// pages/home/home.js

上拉下拉测试即可

四、返回顶部功能实现

在首页中设置一个固定定位的按钮，然后绑定点击事件，绑定事件使用 bindtap，然后调用小程序提供的api即可返回

// pages/home/home.wxml

五、实现点击商品列表进入产品的详情页面

1.构建详情页面

app.json

"pages"

2.声明式导航跳转

使用小程序组件-导航-navigator

页面链接。

open-type 的合法值 -- 在编程式导航中详细讲解

// components/prolist/prolist.wxml

3.详情页面接收数据并且渲染数据

// pages/detail/detail.js

点击不同的产品测试即可

4.编程式导航渲染

使用小程序提供的api实现编程式路由的跳转

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面

wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

小程序传递数据使用 data-params形式，可以在事件中根据event获取该参数

// components/prolist/prolist.wxml

千锋HTML5学院：微信小程序学习笔记（二）-- 开发之框架zhuanlan.zhihu.com

千锋HTML5学院：微信小程序学习笔记（四）-- 常用的组件地图之-mapzhuanlan.zhihu.com

小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发相关推荐

微信小程序开发--首页及详情页开发
一.常用组件在之前的封装请求数据的模块中请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.轮播图数据的请求pages/index/index.js data: {bannerlist:[] / ...
java小项目租车系统_Java学习笔记三十:Java小项目之租车系统
Java小项目之租车系统一:项目背景介绍: 根据所学知识,编写一个控制台版的"呱呱租车系统" 功能: 1.展示所有可租车辆: 2.选择车型.租车量: 3.展示租车清单,包含:总金 ...
XMPP协议学习笔记三（Openfire服务器端搭建开发环境）
2019独角兽企业重金招聘Python工程师标准>>> 在了解了XMPP的基本结构和一些概念之后,我们暂时告别枯燥的理论学习,来动手搭建一下Openfire+Spark的开发环境,实 ...
java xmpp openfire_XMPP协议学习笔记三（Openfire服务器端搭建开发环境）
在了解了XMPP的基本结构和一些概念之后,我们暂时告别枯燥的理论学习,来动手搭建一下Openfire+Spark的开发环境,实际感受一下搭建整套IM通讯系统的过程. 开发环境:windows XP s ...
【小程序】微信小程序开发技巧实用手册（自己做笔记用）
[Css]Css和Html常用设计实例参考笔记(自己开发项目用)_敦厚的曹操的博客-CSDN博客_html和css的项目实例一.左右居中1.div等块元素左右居中margin: 0 auto;marg ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
android源码大全 IOS游戏源代码打包下载小游戏|视频教程微信小程序源码带后台全套|公众号平台
不断更新中,下面是2017-12-22更新部分 IOS_源码及视频一小部分: 开发环境:Xcode 基于cocos2d的tweejump跳跃游戏ios经典游戏源码.rar https://pan.b ...
微信与php什么区别,微信小店和微信小程序的区别是什么？
区别:微信小店的功能比较少,只拥有基本的商城购物功能,没有营销功能,因而只适合不需要营销推广的个人开店:而小程序则是支持各种功能开发,可以开发商城小程序,也可以开发各种营销推广功能,能够满足商家的多功 ...
（微信小程序）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
转载地址:(微信小程序)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好转载请注明出处作者:Happy王子乐个人网站(整理 ...

最新文章

热门文章