草庐IT

03 uniapp/微信小程序 项目day03

Heymar-10 2023-03-28 原文

一.商品列表

1.1 获取数据

首先能够进入商品列表的途径

传的数据有

了解了这个之后就可以开始了,先创建分支

创建编译模式,并分配初试数据

这个时候就可以获取数据了

需要的数据

所以在发起请求之前需要整理一下数据,先定义数据

整理数据发起请求

1.2 渲染页面

注意我们可以去定义一个默认的图片在data,如果当前这个图片没有就为默认图片

1.3 item封装自定义组件

创建组件

新建插件

然后将我们的结构复制过来,样式也复制过来

然后就是组件利用方面,既然封装的是item组件,就要提现item组件的复用性,所以item这个组件必然是在父组件里面被vfor的

所以遍历应该在父组件这边就完成,那么给子组件得到的数据就是每一个具体的goods,就可以先去改造子组件了

记得将默认图片也放在子组件

父组件的改造

然后子组件这边要接受

注意props的简写形式,直接在后面为一个数组

1.4 过滤器处理价格

回顾一下vue的过滤器

首先关键字filters

然后里面是一个函数形式,靠的是返回值,传进来的参数是等会要用的地方的插值语法的参数

用的时候通过一个管道符连接,前面的值就相当于参数

1.5 上拉加载更多

首先修改我们的下拉触底的距离

注意,在uniapp里面没有单独的json文件,所以所有的页面的json修改都在同体的pages.json里面,对应的下面有一个对象这个就是他单独的json配置

然后在这个分包的下拉触底事件来操作

下拉刷新一次,就将页码加一页,同时请求数据里面也要改造一下,赋值我们的列表数据,需要 进行一个扩展运算符的融合

然后解决两个下拉触底经典问题

第一个是节流阀的问题,不能托底过快导致请求好几次数据

声明一个节流阀

为什么放在下面表示数据请求完毕了才让他为fasle的,因为这是await,所以只有返回成功了才会进入下一步

然后下拉触底事件判断

为true就出去,因为为true表示正在请求数据

第二个问题是:数据刷新完毕不应该再发起数据请求

这里也有一个公式 当前页×每页展示数据大于等于总数据的话就说明到头了不能请求数据了

1.6 上拉刷新

首先还是先开启上拉刷新

然后在上拉刷新事件做处理

然后有一个很关键的步骤重新获取数据,我会传一个回调,来关闭下拉刷新效果

记住这种形式,用短路运算来判断有无回调,有就执行,没得就不执行

1.6.1 存在问题 上拉刷新回调无效

1.7 跳转商品详情页面

将block组件改为view组件,绑定click事件

二.商品详情

首先创建分支并创建编译模式

然后发起请求

一样的data定义数据,onload发起函数调用,methods定义请求函数

然后数据赋值

2.1 轮播图效果

定义轮播图结构

然后实现轮播图预览效果

用到uni的一个api previewImage,需要当前照片的索引,第二个参数是一个数组,里面每一项为照片的url地址

返回一个新数组,并且返回的值为每一张big照片

2.2 商品信息区

定义ui结构,并渲染

2.3 商品详情页

这里由于服务器返回的是直接带html标签的一串文本,所以这类要用到小程序专门用来解析html字符串的组件富文本rich-text

里面有一个nodes属性为字符串即可

问题1:

中间会有空隙

其根本原因还是因为 img标签为行内块的原因,这里应该把img都变成block

采用的方法是replace来替换

注意前面如果要加g/i等参数表示是这个

问题2:

价格在刷新一瞬间为undefined的问题

直接条件渲染即可

2.4 商品导航区

有现成的组件,通过 uni-goods-nav这个组件来使用

首先需要定义数据

options表示左边的按钮区域,buttongroup表示右边的区域

然后他的组件写上来

将其固定定位,并记得整个父盒子有个padding-bottom

关于他的点击事件

click表示左边的区域点击事件,buttonclick表示右边的区域点击事件

里面接受一个形参e,可以拿到你点击的这个区域的一些信息

有关03 uniapp/微信小程序 项目day03的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  3. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  4. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  5. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  7. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  8. ruby - 如何在 Ruby 字符串中插入项目符号字符? - 2

    我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是,当我输入它时,我收到有关非ASCII字符的语法错误。我该怎么做? 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1195

  9. ruby - 在 Rails 项目中测试本地版本的 gem - 2

    我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时,我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意,我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR,但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好,但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb,这看起来不对或者b)升级版本,推送到Github,然后运行​​bundleup,这除了耗时之外显然是一场灾难,因为我不确定我所做的promise是否正

  10. ruby-on-rails - rails : Find tasks that were created on a certain day? - 2

    我有一个任务列表(名称、starts_at),我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束),以便进行比较。 最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio

随机推荐