微信小程序 - 商城项目 - 列表排序

article/2025/11/6 15:52:19

sort ( ) 排序

需要实现两个排序功能,价格排序和好评排序,且都可以正反切换

数字比较

价格排序中,价格为数字类型,属于数字的比较,无需转换类型

  // 点击价格排序的图标handlePrice(){this.setData({priceOrder:!this.data.priceOrder})this.setData({goodsList:this.data.priceOrder?this.data.goodsList.sort((a,b)=>b.price-a.price):this.data.goodsList.sort((a,b)=>a.price-b.price)})},

点击价格排序的图标后,切换阀门值

sort((a,b)=>b.price-a.price) 或 sort((a,b)=>a.price-b.price) 正反排序的切换

非数字比较

好评排序中,好评为字符串类型需要进行类型的转换

  // 点击好评排序的图标handleComment(){this.setData({commentOrder:!this.data.commentOrder})this.setData({goodsList:this.data.commentOrder?this.data.goodsList.sort((a,b)=>parseInt(b.goodcomment)-parseInt(a.goodcomment)):this.data.goodsList.sort((a,b)=>parseInt(a.goodcomment)-parseInt(b.goodcomment))})},

parseInt ( ) 的使用

这里使用 parseInt ( ) 进行字符串的类型转换

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数,radix 是 2-36 之间的整数,表示被解析字符串的基数。

console.log(parseInt('10')) // 10
console.log(parseInt('10a')) // 10console.log(parseInt('111', 2)) // 7
console.log(parseInt('A12', 16)) // 2578

注意事项:
        parseInt 第一个参数。如果不是一个字符串,则将其转换为字符串 

        parseInt 第二个参数。从 2 到 36 的整数,表示进制的基数。例如指定 16 表示被解析值是十六进制数。如果超出这个范围,将返回 NaN。假如指定 0 或未指定,基数将会根据字符串的值进行推算。


http://chatgpt.dhexx.cn/article/akyKTcZI.shtml

相关文章

微信小程序之多列表的显示和隐藏功能【附源码】

效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id;css中定义一个hidden{display:none}控制显示和隐藏,然后通过三元运算符来判断&#x…

微信小程序列表实现

1.在 .json文件中使用 navigationBarTitleText定义当前窗口title {"navigationBarTitleText": "小程序列表实现" }2.在 .wxss文件中编写如下: // page设置当前窗口背景色 page{background-color: #F5F5F5 }// 定义.container设置容器样式 .co…

微信小程序 开发列表

一.知识点 (一).列表渲染 wx:for tip:wx:for“array”可以等于参数名,在js中调用 Page({ data:{ array: [{name: 小李},{ name: 小高}]} }),获取值;也可以直接把wx:for"{{[1, 2, 3]}}",把值放在上面 1.在组件上使用wx:f…

微信小程序实现分类列表

1、效果展示 2、fenleiliebiao.wxml文件代码 <!-- 头部搜索 --> <view class"title_search"></view> <!-- 头部搜索 --> <!-- Tab布局 --> <view catchtouchmovetrue><view classnavBox><view classtitleBox1 id"…

微信小程序--数据列表

设置页面标题 首页可以使用&#xff1a; app.json中window对象的"navigationBarTitleText"参数进行标题设置&#xff0c; 每个页面也可以在对应json文件中使用"navigationBarTitleText"参数进行标题设置 也可以在js文件的onRead函数中使用&#xff1a;js中…

用小程序完成简单的详情列表功能

最近学习了微信小程序&#xff0c;写了一个详情列表 主要思路是&#xff1a; 1.先通过接口拿到数据&#xff0c;在onLoad(options){}中调用wx.request(){}函数&#xff0c;获取到数据 2.完成数据渲染后&#xff0c;&#xff0c;用catchtab给它绑定一个点击事件&#xff0c;点…

微信小程序--列表展示

小知识&#xff1a; wx:for"{{list}}"用来循环数组。 wx:for-item‘变量名&#xff08;随便起&#xff09;’ 它是指定循环数据当前的变量名&#xff0c;可以通过 {{变量名.属性}} 展示数组的元素。 wx:for-index‘变量名&#xff08;随便起&#xff09;’&#x…

vmware 下 ubuntu 双网卡设置

写在前面&#xff1a; 本文章旨在总结备份、方便以后查询&#xff0c;由于是个人总结&#xff0c;如有不对&#xff0c;欢迎指正&#xff1b;另外&#xff0c;内容大部分来自网络、书籍、和各类手册&#xff0c;如若侵权请告知&#xff0c;马上删帖致歉。 目录 step 1&#xf…

Ubuntu18.04 配置网卡

2019/10/29, Ubuntu Server 18.04 摘要&#xff1a;Ubuntu Server 18.04 采用netplan作为网络配置管理&#xff0c;修改IP使其连上网络&#xff0c;修改替换软件源 修改网卡配置# 首先使用ip a查看当前网卡名称&#xff1a; 可以看到eth0就是我们的网卡名称&#xff0c;这个要…

linux Ubuntu网卡配置,Windows 7下用VirtualBox安装Ubuntu网卡配置

Windows 7下用VirtualBox安装Ubuntu&#xff0c;要求Ubuntu能连上互联网&#xff0c;同时在Ubuntu中配置SSH、FTP、NFS服务&#xff0c;能从Win7进行访问。 此时Linux虚拟机需要两块网卡&#xff0c;一块使用NAT方式(网络地址翻译网络)连接&#xff0c;用于连接互联网&#xff…

Ubuntu 双网卡配置优先级

Ubuntu 双网卡配置优先级 作者&#xff1a;Bright Xu Ubuntu的网卡配置跟CentOS不太一样。 更多请参考&#xff1a;CentOS 双网卡配置优先级 根据业务需要&#xff0c;有时候服务器需要两张网卡&#xff0c;一张用于访问外网&#xff0c;另一种用于连接内网。 如果在安装系统是…

ubuntu配置网卡

第一步&#xff1a;查看网卡信息 输入ifconfig命令查看网卡信息&#xff0c;下图红圈处就是网卡名称。 第二步&#xff1a;配置网卡文件 注意&#xff1a;不同的linux系统&#xff0c;网卡配置文件是不同的&#xff0c;这里ubuntu的网卡配置文件是/etc/network/interfaces。 输…

Ubuntu18.04  网卡配置

Ubuntu18.04 网卡配置 Ubuntu18.04网卡配置&#xff0c;不同于其他Linux网卡配置&#xff0c;Ubuntu18.04采用的是 Netplan ,想要了解具体可查看官网。 1、设置网络为&#xff1a;桥接网卡 2、在宿主电脑上使用管理员输入CMD 命令 ipconfig /all 查看子网掩码&#xff…

ubuntu16.04配置网卡

第一步&#xff1a;查看网卡信息 输入ifconfig命令查看网卡信息&#xff0c;下图红圈处就是网卡名称。 第二步&#xff1a;配置网卡文件 注意&#xff1a;不同的linux系统&#xff0c;网卡配置文件是不同的&#xff0c;这里ubuntu的网卡配置文件是/etc/network/interfaces。 …

Ubuntu配置网卡信息(ip、网关、子网掩码、dns)

目录 一、前言二、配置网卡信息三、注意事项 一、前言 本文介绍了Ubuntu系统下配置网卡的信息&#xff0c;包含网卡的ip地址、网关、子网掩码和dns。   网卡的ip地址可以设置成动态&#xff08;DHCP&#xff09;或静态的&#xff0c;网关和掩码根据实际需求选择是否设置。dns…

idea如何用git更新和提交代码

一、git更新操作 第一步&#xff1a; 在提交项目之前必须先对项目进行更新&#xff0c;此项特别重要&#xff0c;如果不进行更新&#xff0c;别人有项目提交到服务器上&#xff0c;那么你的项目将会提交不上去&#xff0c;使用git解决冲突会比较麻烦&#xff0c;即使你解决了冲…

gitee更新代码库

步骤&#xff1a; 克隆仓库(有则省略此步) git clone https://gitee.com/master_wei/trainticketsale_fork.git 一、同步远程仓库信息 git pull origin master …

Git更新代码到本地

一.首先查看git 远程仓库的地址 git remote -v 二,更新代码本地到仓库两种方式&#xff1a; /方法一 $ git fetch origin master //从远程的origin仓库的master分支下载代码到本地的origin master$ git log -p master.. origin/master//比较本地的仓库和远程参考的区别$ git …

git强制更新本地代码,git pull无法更新本地代码,git pull显示更新成功但是本地并没有拉去到最新的代码

git pull之后看见没有&#xff0c;看见了吧&#xff0c;Already up to date. 操作了N遍&#xff0c;但是当对比本地和远程库之后&#xff0c;发现自己本地的代码根本就不是最新的&#xff0c; 怎么解决&#xff1f; 强制更新&#xff0c;将本地代码更新为仓库里最新的代码&a…

Git如何更新远程仓库代码到本地

1.首先可以暂存本地的修改&#xff0c;如果本地没有修改&#xff0c;则会显示“没有要保存的本地修改” git stash 2.执行命令会找到项目重新拉取代码进行更新&#xff0c;可以看到该程序有更新。 git fetch --all3.执行命令进行更新文件的下载覆盖&#xff0c;下面会列出哪些…