附录6-1 黑马优购项目-组件与过滤器

news2025/1/14 18:13:58

目录

1  过滤器-格式化价格

2  组件-搜索框

3  组件-数量框

4  组件-商品概况

4.1  格式化价格

4.2  选择性使用勾选框和数量框

4.3  源码 

1  过滤器-格式化价格

这个项目中仅用到格式化价格这一种过滤器。过滤器文件位置为store/filter.wxs

文件内容是这样的，功能是保留两位小数。后续我们会进行引用

2  组件-搜索框

在首页中有使用

在分类中有使用

在app.json中注册black_horse_search组件

html

<!--components/black_horse_search.wxml-->
<view class="my-search-container" bindtap="go_search_page">
  <view class="my-search-box">
    <icon class="icon-small" type="search" size="17"></icon>
    <text class="placeholder">搜索</text>
  </view>
</view>

css

/* components/black_horse_search.wxss */
.my-search-container {
  background-color: #c00000;
  height:50px;
  padding:0 10px;
  display:flex;
  align-items: center;
}

.my-search-box {
  height:36px;
  background-color: #fff;
  border-radius: 15px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.my-search-box .placeholder {
  font-size:15px;
  margin-left:5px;
}

js

// components/black_horse_search.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    go_search_page() {
      wx.navigateTo({url:'/subpackage_search/search'})
    }
  }
})

js中只有点击后跳转到子页面search，跳转之后的事情就不用这个组件来做了

3  组件-数量框

数量框就是这个，该项目中只有购物车中用到了数量框，所以实际这个没必要封装

wxml

<!--components/number_box/number_box.wxml-->
<view class="number-container">
    <!-- 减 1 的按钮 -->
    <button size="mini" bindtap="sub_one" class="number_container_button">-</button>
    <!-- 购买的数量 -->
    <view class="number-box">{{ goods_count }}</view>
    <!-- 加 1 的按钮 -->
    <button size="mini" bindtap="add_one" class="number_container_button">+</button>
</view>

wxss

/* components/number_box/number_box.wxss */
.number-container {
  display: flex;
  text-align: center;
  justify-content: center;
}

.number-box {
  line-height: 80rpx;
  text-align: center;
  margin: 0 5px;
  font-size: 12px;
}

js

// components/number_box/number_box.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    goods_count:{
      type:Number,
      value:1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    add_one(e) {
      this.setData({goods_count:this.data.goods_count+1})
      this.triggerEvent("add_one",e.target.dataset)
    },
    sub_one(e) {
      if (this.data.goods_count > 1) {
        this.setData({goods_count:this.data.goods_count-1})
      }
      this.triggerEvent("sub_one",e.target.dataset)
    }
  }
})

在js中用到了自定义事件传递数据。从数量框->goods_list_item->购物车页面

e.target.dataset是传递参数，我们在组件中没写参数，也不需要传递参数，所以可以删掉

4  组件-商品概况

在商品列表中使用。每一个绿框就是一个组件

在购物车中使用

在app.json中注册goods_list_item组件

4.1  格式化价格

引入wxs，然后在模板中使用

4.2  选择性使用勾选框和数量框

从使用者接受properties觉得是否使用勾选框和数量框

4.3  源码 

wxml

<!--components/goods_list_item/goods_list_item.wxml-->

<wxs module="filter" src="../../store/filter.wxs"></wxs>

<view class="goods-item">
  <view class="goods-item-left">
    <checkbox model:checked="{{goods_checked}}" color="#C00000" wx:if="{{showRadio}}" bindtap="trigger_change_radio_state_event" data-goods_id="{{goods_id}}" data-goods_status="{{goods_checked}}" />
    <image src="{{goods_small_logo}}" class="goods-pic" data-goods_id="{{goods_id}}"/>
  </view>
  <view class="goods-item-right" data-goods_id="{{goods_id}}">
    <view class="goods-name" data-goods_id="{{goods_id}}" >{{goods_name}}</view>
    <view class="goods-info-box" data-goods_id="{{goods_id}}">
      <view class="goods-price" data-goods_id="{{goods_id}}">￥{{filter.format_price(goods_price)}}</view>
      <number_box wx:if="{{showNumberBox}}" goods_count="{{goods_count}}" bind:add_one="add_one" bind:sub_one="sub_one" data-goods_id="{{goods_id}}"></number_box>  
    </view>
  </view>
</view>

在这里给所有的元素都给上了data-goods_id是怕goods_id传不出去，怀疑是和事件冒泡有关，应该有更简便的写法，如果不想思考就给每个元素都加上

wxss

/* components/goods_list_item/goods_list_item.wxss */

.goods-item {
  display:flex;
  padding:10px 5px;
  border-bottom:1px solid #f0f0f0;
}
/* 左侧 */
.goods-item .goods-item-left {
  margin-right:5px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}

.goods-item .goods-item-left .goods-pic {
  width:100px;
  height:100px;
  display: block;
}
/* 右侧 */
.goods-item .goods-item-right {
  display: flex;
  flex:1;
  flex-direction:column;
  justify-content:space-between;
}

.goods-item .goods-item-right .goods-name {
  font-size:13px;
}

.goods-item .goods-item-right .goods-price {
  font-size:16px;
  color:#c00000;
}

.goods-item .goods-item-right .goods-info-box {
  display:flex;
  align-items:center;
  justify-content: space-between;
}

js

// components/goods_list_item/goods_list_item.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    goods_small_logo:{
      type:String,
      value:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
    },
    goods_id:{
      type:Number
    },
    goods_count:{
      type:Number
    },
    goods_price:{
      type:Number
    },
    goods_name:{
      type:String
    },
    showRadio:{
      type:Boolean,
      value:false
    },
    showNumberBox:{
      type:Boolean,
      value:false
    },
    goods_checked:{
      type:Boolean,
      value:true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    trigger_change_radio_state_event(e) {
      this.triggerEvent("radio_change",e.target.dataset)
    },
    add_one(e) {
      this.setData({goods_count:this.data.goods_count+1})
      this.triggerEvent("add_one",e.target.dataset)
    },
    sub_one(e) {
      if (this.data.goods_count > 1) {
        this.setData({goods_count:this.data.goods_count-1})
      }
      this.triggerEvent("sub_one",e.target.dataset)
    }
  }
})

js中干了两件事，一个是通过properties收数据，另一个是通过方法向上传数据，这里的e.target.dataset不可省略，因为要向上传递goods_id

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【嵌入式DIY实例】-植物自动浇水机

【嵌入式DIY实例】-植物自动浇水机

DIY自动植物浇水机 文章目录 DIY自动植物浇水机1、硬件准备与接线2、代码实现智能灌溉系统是一种先进的、新技术的灌溉技术，可以减少人力、时间等。在本文中，将介绍如何实现一个植物自动浇水机。通过这个项目，可以给我们身边的一些植物，所有花盆都安装这一系统。这个系统由…
阅读更多...
【JavaEE初阶系列】——理解tomcat 带你实现最简单的Servlet的hello world程序(七大步骤）

【JavaEE初阶系列】——理解tomcat 带你实现最简单的Servlet的hello world程序(七大步骤）

目录 &#x1f6a9;认识Tomcat &#x1f6a9;运用Tomcat &#x1f6a9;Servlet &#x1f393;完成简单的Servlet的hello world程序 &#x1f388;创建项目Maven &#x1f388;引入依赖 &#x1f388;创建目录 &#x1f388;编写代码 &#x1f388;打包程序 &#x1…
阅读更多...
关于用户体验和设计思维

关于用户体验和设计思维

介绍 要开发有效的原型并为用户提供出色的体验&#xff0c;了解用户体验 (UX) 和设计思维的原则至关重要。 用户体验是用户与产品、服务或系统交互并获得相应体验的过程。 设计思维是一种解决问题的方法&#xff0c;侧重于创新和创造。 在启动期实现用户体验和设计思维时&#…
阅读更多...
头歌：SparkSQL简单使用

头歌：SparkSQL简单使用

第1关&#xff1a;SparkSQL初识 任务描述 本关任务&#xff1a;编写一个sparksql基础程序。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1. 什么是SparkSQL 2. 什么是SparkSession。 什么是SparkSQL Spark SQL是用来操作结构化和半结构化数据的接口。…
阅读更多...
Tuxera NTFS使用教程 轻松实现磁盘格式转换的教程分享 ntfsMac软件怎么用

Tuxera NTFS使用教程 轻松实现磁盘格式转换的教程分享 ntfsMac软件怎么用

NTFS for Mac是Mac电脑里非常重要的工具之一&#xff0c;因为它太实用了&#xff0c;解决了NTFS移动硬盘在Mac上的写入问题。但是&#xff0c;小伙伴在安装完软件之后&#xff0c;通常再也不会关注它&#xff0c;甚至时间长了&#xff0c;也就忘了Mac里还有这么一个软件。 在Tu…
阅读更多...
GB32960解析工具

GB32960解析工具

几年前搞了一个用Qt开发的国标32960报文解析工具。分享给大家&#xff0c;只用1积分便可以下载。 国标32960新能源车协议解析工具资源-CSDN文库
阅读更多...
(附源码)超级简单的SSM图书交易系统，包含技术栈、架构图、设计图、教程

(附源码)超级简单的SSM图书交易系统，包含技术栈、架构图、设计图、教程

先看首页效果&#xff0c;包含买家、卖家、管理员三个端口。启动有问题可以联系我解决&#xff0c;微信&#xff1a;keepgoing4u 架构图&#xff1a; 用到软件 Jdk1.8 Mysql IntelliJ IDEA Maven 项目技术&#xff1a; Spring Boot SSM JSP mybatis Maven B/S模式 配置…
阅读更多...
云服务器的主要用途有哪些，使用云服务器具有哪些方面的优势

云服务器的主要用途有哪些，使用云服务器具有哪些方面的优势

随着科技的飞速发展&#xff0c;云计算已经成为现代企业和个人用户不可或缺的技术支持&#xff0c;云计算技术已经逐渐渗透到我们生活的方方面面。云服务器作为云计算的核心组成部分&#xff0c;正在逐步改变我们的数据存储和处理方式&#xff0c;成为各类互联网用户实现综合业…
阅读更多...
前端vite+rollup前端监控初始化——封装基础fmp消耗时间的npm包并且发布npm beta版本

前端vite+rollup前端监控初始化——封装基础fmp消耗时间的npm包并且发布npm beta版本

文章目录 ⭐前言&#x1f496;vue3系列文章 ⭐初始化npm项目&#x1f496;type为module&#x1f496;rollup.config.js ⭐封装fmp耗时计算的class&#x1f496;npm build打包class对象 ⭐发布npm的beta版本&#x1f496; npm发布beta版本 ⭐安装web-performance-tool的beta版本…
阅读更多...
2024年第二十一届 五一杯 （B题）大学生数学建模挑战赛 | 最大流问题，深度学习分析 | 数学建模完整代码解析

2024年第二十一届 五一杯 （B题）大学生数学建模挑战赛 | 最大流问题，深度学习分析 | 数学建模完整代码解析

DeepVisionary 每日深度学习前沿科技推送&顶会论文&数学建模与科技信息前沿资讯分享&#xff0c;与你一起了解前沿科技知识&#xff01; 本次DeepVisionary带来的是五一杯的详细解读&#xff1a; 完整内容可以在文章末尾全文免费领取&阅读&#xff01; 第一个问题…
阅读更多...
算法效率的判断及一些典型例题的讲解

算法效率的判断及一些典型例题的讲解

一.算法效率 1.用处&#xff1a;判断算法的好坏&#xff0c;好的算法应该是高效的 2算法效率取决于时间复杂度和空间复杂度 <1>时间复杂度 1.1概念&#xff1a;算法中基本操作的执行次数就是算法的时间复杂度 1.2表示&#xff1a;大O的渐进表示法&#xff0c;例如O(N)…
阅读更多...
什么是场内期权,场内期权是如何操作的？

什么是场内期权,场内期权是如何操作的？

今天期权懂带你了解什么是场内期权,场内期权是如何操作的&#xff1f;场内期权是标准化、规范化且在公开市场交易的金融衍生品。相比场外期权&#xff0c;场内期权具有更高的流动性和透明度。 什么是场内期权&#xff1f; 场内期权&#xff0c;也称为交易所期权&#xff0c;是…
阅读更多...
【C++航海王：追寻罗杰的编程之路】C++11(四)

【C++航海王：追寻罗杰的编程之路】C++11(四)

目录 1 -> 相关文章 【C航海王&#xff1a;追寻罗杰的编程之路】C11(一) 【C航海王&#xff1a;追寻罗杰的编程之路】C11(二) 【C航海王&#xff1a;追寻罗杰的编程之路】C11(三) 2 -> lambda表达式 2.1 -> C98中的一个例子 2.2 -> lambda表达式 2.3 ->…
阅读更多...
HCIA-题目解析1

HCIA-题目解析1

0x00 前言 遇到这样一道题，这种题目对于我来说还是比较复杂的，所以记录一下。主要还是和熟练度有关系。 0x01 题目 路由器RouterID邻居关系如下，下列说法正确的是 A:本路由器和Router-lD为10.0.3.3的路由器不能直接交换链路状态信息 B:DR路由器的Router-lD为10.0.1.2 C:…
阅读更多...
Flutter运行项目一直：running gradle task

Flutter运行项目一直：running gradle task

大体原因就是访问国外的资源由于网络等原因导致访问失败&#xff0c;解决方法就是换成国内的源 修改项目的android/build.gradle 文件&#xff0c;将里面的 google() mavenCentral()替换为 maven {allowInsecureProtocol trueurl https://maven.aliyun.com/repository/googl…
阅读更多...
前端 CSS

前端 CSS

目录 选择器 复合选择器 伪类-超链接 结构伪装选择器 伪元素选择器 画盒子 字体属性 CSS三大属性 Emmet写法 背景属性 显示模式 盒子模型 盒子模型-组成 盒子模型-向外溢出 盒子模型-圆角 盒子模型-阴影 flex position定位 CSS小精灵 字体图标 垂直对齐方式…
阅读更多...
Oracle集群-常用查询及操作（工作日常整理）

Oracle集群-常用查询及操作（工作日常整理）

1.Oracle集群状态 select * from gv$instance; 示例结果&#xff1a; 2.Oracle集群-增大表空间 常见问题&#xff1a; 导入时或使用时&#xff0c;提示无法extend table ,增加表空间即可 常用操作&#xff1a; 1&#xff09;查询表空间 select * from dba_tablespaces; --…
阅读更多...
Redisson分布式锁，重试锁和锁续命的原理

Redisson分布式锁，重试锁和锁续命的原理

RedissonLock 锁重试原理 tryLock有三个三个参数&#xff0c;第一个是等待时间&#xff0c;第二个是锁失效后自动释放的时间,不填默认为-1&#xff0c;第三个是时间单位&#xff1b; 当设置了第一个参数&#xff0c;那这个锁就成了可重试锁&#xff1b;获取锁失败后&#xff0c…
阅读更多...
【redis】Redis数据类型(三)List类型

【redis】Redis数据类型(三)List类型

目录 List类型介绍特点 List数据结构附&#xff1a;3.2以前的版本(介绍一下压缩列表和双向链表)压缩列表ZipList双向链表LinkedList 常用命令lpush示例 lpushx示例 rpush示例 rpushx示例 LPOP示例 RPOP示例 BLPOP非阻塞行为阻塞行为相同的 key 被多个客户端同时阻塞在 MULTI/EX…
阅读更多...
vscode 使用code runner 运行代码输出乱码

vscode 使用code runner 运行代码输出乱码

vscode 使用code runner 运行代码输出乱码 先指出问题所在&#xff1a; 代码文件使用的编码格式和终端使用的编码格式不一致&#xff0c;查看代码文件右下角&#xff0c;会显示代码文件的编码格式。 测试代码如下&#xff1a; #include<iostream> using namespace std…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023