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

一、常用组件

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

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

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

import 

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

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

ae784178b03c39acd541d62796407b01.png

27b1374904f9563210bc57ae255a8440.png


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

<!--

8bbfbc1170d965bb3fd709810aa64d74.png

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

1.自定义组件的布局

components/prolist/prolist.wxml

<

2.自定义组件的样式

components/prolist/prolist.wxss

/* components/prolist/prolist.wxss */

5c520ec0a1c74adb91f28d09be9d6873.png

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

pages/home/home.js

import 

pages/home/home.wxml

<

4.子组件接收数据

components/prolist/prolist.js

Component

5.子组件渲染数据

components/prolist/prolist.wxml

<

55789d6b498614458835186b3da74383.png

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

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

页面链接。

452a15a9ccdf725c1f127f386993fa51.png

ae5f35c9463e3bf4e0f1d72167ad4e94.png


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

f51104350ded87550399ad8087b1816c.png
// components/prolist/prolist.wxml

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

// pages/detail/detail.js

19f8afc2781243a661f98ffb17e0e2d4.png

点击不同的产品测试即可

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学院:微信小程序学习笔记(四)-- 常用的组件地图之-map​zhuanlan.zhihu.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云计算与边缘计算协同 九大应用场景

来源&#xff1a;物联网报告中心前言2019 年边缘计算备受产业关注&#xff0c;一度引起了资本市场的投资热潮&#xff0c;很多人把2019 年称作边缘计算的元年。理性来看&#xff0c;造成如此火爆局势难免有一些炒作因素在推波助澜&#xff0c;毕竟边缘计算的概念存世也已多年。…

cat3 utp是不是网线_网线/双绞线上各标识CAT, AWG, PR, UTP/STP/FTP/SFTP的含义

CAT5, CAT5e, CAT6表示网线类别, 常见的有 CAT5, CAT5e, CAT6分别表示五类, 超五类, 六类网线24AWG, 26AWGAmerican Wire Gauge是美制电线标准, 表示电缆直径. AWG值是导线厚度(以英寸计)的函数, 24AWG约为0.511mm&#xff0c;4pr表示有四对双绞线UTPUnshielded Twisted Pair 非…

Wireshark过滤器表达式的规则

1、抓包过滤器语法和实例 抓包过滤器类型Type&#xff08;host、net、port&#xff09;、方向Dir&#xff08;src、dst&#xff09;、协议Proto&#xff08;ether、ip、tcp、udp、http、icmp、ftp等&#xff09;、逻辑运算符&#xff08;&& 与、|| 或、&#xff01;非&…

《深入浅出WPF》学习笔记之深入浅出话属性

依赖属性是一种可以从父级元素继承&#xff0c;并且可以通过Binding从数据源获取&#xff0c;当从父级继承时不占用内存的属性系统。拥有依赖属性的对象称为依赖对象。WPF允许在创建对象时并不分配用于存储数据的空间&#xff0c;而在需要时实时分配空间或直接借用父级数据&…

sql 创建表时AUTO_INCREMENT=10

默认地&#xff0c;主键的开始值是 1&#xff0c;每条新记录递增 1&#xff0c;AUTO_INCREMENT10 代表初始值为10。

一年代码功能点的创新性怎么写_查新报告的查新点(创新点)写法,参考

创新点(查新点)写法参考(要求&#xff1a;尽量具体&#xff0c;简明扼要&#xff0c;突出核心亮点&#xff0c;用专业术语。不要写的笼统、抽象、宽泛、上位)。可从结构、技术、参数、功能等方面考虑(并非全部要写)&#xff1a;1、结构方面的创新(前面部分是具体的创新结构形式…

查询手机号段对应地区编码_2020陕西专升本考试今日起查询成绩啦

专升本考试顺利结束,我们终于迎来了验收成果的时刻,每位参与专升本的同学都是最棒的,现在 我们一起去揭秘考试成绩吧&#xff01;专升本成绩查询指南成绩查询及志愿填报登陆“陕西省教育考试院”或“陕西省招生考试信息网”陕西招生考试信息网http://www.sneac.com/陕西省教育…

李德仁院士:5G时代空间信息如何实现智能服务

李德仁院士来源&#xff1a;光明日报【编者按】随着5G时代的到来&#xff0c;物联网、云计算、大数据等技术快速发展。信息基础设施日益完善&#xff0c;全球时空大数据呈爆发式增长。在这样的时代背景下&#xff0c;如何实现空间感知和空间认知的智能化&#xff0c;在正确的时…

个人对响应式布局的理解

从字面上理解&#xff0c;响应式布局即CSS布局随着屏幕尺寸的变换而变化。首先我们要搞清楚什么是固定布局&#xff0c;什么是流式布局。固定布局(Fixed Layout)使用固定宽度的包裹(Wrapper), 内部的各个部分可以使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包…

jmeter 不同场景 比例_在JMeter测试中如何根据业务场景来控制运行比例

性能测试混合场景中&#xff0c;我们需要组合多个业务操作到场景中来。比如有一个论坛的业务分布如下&#xff1a;开新帖与回复帖子的比例为2:3&#xff0c;那么我们在JMeter测试计划中如何控制其比例呢&#xff1f;下面我们介绍两种方式&#xff1a;1.多线程组方式2.逻辑控制器…

python爬取新浪新闻首页_学习了《python网络爬虫实战》第一个爬虫,爬取新浪新闻...

请安装anaconda,其中附带的spyder方便运行完查看变量 1.进入cmd控制台&#xff0c; 输入 pip install BeautifulSoup4 pip install requests 2.编写代码&#xff0c;代码已经很清晰了&#xff0c;直接运行不会报错并有成功的结果def getNewsDetail(newsUrl): import requests f…

sql去重查询

例如&#xff0c;从 "Websites" 表的 "country" 列中选取唯一不同的值 SELECT DISTINCT country FROM Websites;

计算机和人类“看”法不同,但这重要么?

来源&#xff1a;大数据文摘“看”这个动作一直被认为是生物所独有的。当工程师第一次“教”计算机“看”这个动作时&#xff0c;他们理所当然地认为计算机可以像人类眼睛一样进行观看。约克大学&#xff08;York University&#xff09;计算机科学家约翰托索斯&#xff08;Joh…

获取项目根路径,并在其下创建一个名称为userData 的目录。

NSArray *pathsNSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES); NSString *documentsDirectory [paths objectAtIndex:0]; // 创建文件系统管理器 NSFileManager *fileManager [[NSFileManageralloc] init]; // 判断userData 目录是否存在 …

svn拉取文件合并_SVN的分支使用

使用过git版本管理的同学大部分都使用过分支&#xff0c;git创建切换分支非常直观&#xff0c;SVN则相对来说没有那么强的分支的概念。本文主要介绍SVN中的分支使用。SVN默认的生成目录如下通常 branches 目录下为开发分支&#xff0c;tags 目录为标签目录&#xff0c;trunk 为…

python编程入门单例_python实现单例模式怎么写啊?

这个网上有很多的&#xff0c;你可以搜一搜&#xff0c;单例设计模式很多面试官都会考的&#xff0c;最好是记住一两个&#xff0c;我下面写一个例子给你看一下 使用__new__方法 在__new__方法中把类实例绑定到类变量_instance上&#xff0c;如果cls._instance为None表示该类还…

超级智能的定义,一个已经诞生并不断深刻影响人类的新智能

来源&#xff1a;今日头条在人工智能领域&#xff0c;有一个不成熟的观点&#xff0c;认为当人工智能发展成为“在几乎所有领域都大大超过人类认知表现的任何智力”时&#xff0c;这时人工智能可以被视作超级人工智能或超级智能。但这种从人工智能延伸的超级智能因为在理论和实…

MySQL修改数据表存储引擎的3种方法介绍

看你的mysql现在已提供什么存储引擎:mysql> show engines;看你的mysql当前默认的存储引擎:mysql> show variables like %storage_engine%;你要看某个表用了什么引擎(在显示结果里参数engine后面的就表示该表当前用的存储引擎):mysql> show create table 表名; MySQL作…

linux suse 共享目录_SUSE环境下YAST源(连接共享目录)

很多台SUSE11版本的服务器都需要安装net-snmp包&#xff0c;我不想一个劲地插拔光盘&#xff0c;于是想办法写了这篇短文背景说明&#xff1a;实际情况是&#xff0c;有很多台suse11版本的服务器都需要安装net-snmp包&#xff0c;suse下的Yast服务可以解决包之间的依赖关系问题…