微信小程序——商品列表

主页面

<view class="container"><googsList goodsClassList="{{goodsClassList}}" goodsList="{{goodsList}}"  bind:leftClick="leftClick"  bind:toDetails="toDetails"  bind:scrolltolowerGoodsClass="scrolltolowerGoodsClass" bind:scrolltolowerGooodsList="scrolltolowerGooodsList"></googsList>
</view>

引入组件

{"usingComponents": {"googsList":"../components/goodsList/goodList"}
}
Page({data: {goodsClassList: [{categoryId: "0",categoryName: "全部",stock: 0}, {categoryId: "391",categoryName: "床"}, {categoryId: "392",categoryName: "沙发"}, {categoryId: "393",categoryName: "衣柜"}, {categoryId: "394",categoryName: "餐桌"}, {categoryId: "395",categoryName: "办公椅"}, {categoryId: "391",categoryName: "床"}, {categoryId: "392",categoryName: "沙发"}, {categoryId: "393",categoryName: "衣柜"}, {categoryId: "394",categoryName: "餐桌"}, {categoryId: "395",categoryName: "办公椅"}, {categoryId: "391",categoryName: "床"}, {categoryId: "392",categoryName: "沙发"}, {categoryId: "393",categoryName: "衣柜"}, {categoryId: "394",categoryName: "餐桌"}, {categoryId: "395",categoryName: "办公椅"}, {categoryId: "391",categoryName: "床"}, {categoryId: "392",categoryName: "沙发"}, {categoryId: "393",categoryName: "衣柜"}, {categoryId: "394",categoryName: "餐桌"}, {categoryId: "395",categoryName: "办公椅"}],goodsList: [{goodsId: 4179,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/4c6f864f-912a-4601-8fc8-8021b8247ec1.jpg",goodsName: "卧室原木大床",goodsPrice: 2456,status: 1,stock: 0,}, {goodsId: 4180,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/79212939-e8ad-40bb-abdf-89706c1ef9a8.jpg",goodsName: "实木沙发 黑胡桃木",goodsPrice: 1800,status: 1,stock: 28,}, {goodsId: 4190,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/e0e394e0-3c30-4611-95f9-f244044dae68.jpg",goodsName: "实木餐桌 大尺寸餐桌 橡木 樱桃木 白蜡木",goodsPrice: 3888,status: 1,stock: 28,}, {goodsId: 4191,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/36c39361-49d6-46e9-9926-2663377ae434.jpg",goodsName: "实木餐椅 软包餐椅 梳妆椅 书桌椅",goodsPrice: 3888,status: 1,stock: 99}, {goodsId: 4205,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/14ef0704-f407-4db4-9533-5458bde955a5.png",goodsName: "实木沙发 橡木 全拆洗设计 软包多色可选",goodsPrice: 3888,status: 1,stock: 99}, {goodsId: 4207,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/25369361-0a57-4d8d-8a73-59807a3daa0e.png",goodsName: "实木沙发 橡木 布艺沙发 科技布沙发 多色可选",goodsPrice: 3888,status: 1,stock: 92}, {goodsId: 4208,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/08f33023-ec55-4b49-8d5a-297f09698e23.png",goodsName: "单人沙发椅 藤编休闲椅",goodsPrice: 3888,status: 1,stock: 99}, {goodsId: 4222,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/c7198316-1dd6-4377-8f8c-ac5d4f7fe166.png",goodsName: " 边柜 橡木 小户型 藤编储物柜",goodsPrice: 3888,status: 1,stock: 99,}, {goodsId: 4223,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/c6f45a76-cca8-4560-ae39-56b0a64dbcbc.png",goodsName: "实木沙发 橡木 藤编沙发 可拆洗",goodsPrice: 3888,status: 1,stock: 99}, {goodsId: 4226,goodsMainImg: "https://haiwaiu.oss-cn-hangzhou.aliyuncs.com/app/61ce745d-9e9b-4143-a1ae-9f5a2455e31f.png",goodsName: "单人沙发椅 侘寂风 藤编休闲椅",goodsPrice: 3888,status: 1,stock: 99}],categoryId: '', //栏目的idgoodsId: '', //商品的idpage: 1,limit: 10,noMore: false},//获取左边项目栏的idleftClick(e) {// console.log(e)// 调用接口获取商品列表this.setData({categoryId: e.detail.categoryId,goodsList: []})},// 获取商品列表getGoodsList() {// 调用接口返回的数据 let list = []if (list.length < this.data.limit) {this.data.noMore = true} else {this.data.noMore = false}},toDetails(e) {// console.log(e)// 调用接口获取商品的信息this.setData({goodsId: e.detail.goodsId,})},//分页查询scrolltolowerGooodsList() {// console.log("++++++++++")if (this.data.noMore) returnthis.data.page += 1this.getGoodsList()},// 获取商品栏目scrolltolowerGoodsClass() {// console.log("-----------")},
})

组件部分代码

<view class="goods-container"><!--商品类型栏目  --><scroll-view class="goods-class-list" scroll-y="true" style="width: 190rpx" enable-flex="flexbox" scroll-anchoring="true" bindscrolltolower="scrolltolowerGoodsClass" lower-threshold="10"><view class="goods-class-item text-overflow {{activeIndex==index?'selected':''}}" wx:for="{{goodsClassList}}" wx:key="index" bindtap="leftClick" data-index="{{index}}" data-item="{{item}}">{{item.categoryName}}</view></scroll-view><!--商品列表  --><scroll-view class="goods-list" scroll-y="true" enable-flex="flexbox" scroll-anchoring="true" bindscrolltolower="scrolltolowerGooodsList" lower-threshold="10"><view class="goods-list-item" wx:for="{{goodsList}}" wx:key="index" bindtap="toDetails" data-item="{{item}}"><image class="goods-img {{item.stock==0?'scarce-goods':''}}" src="{{item.goodsMainImg}}" lazy-load="true"></image><view class="goods-info"><view class="goods-title">{{item.goodsName}}</view><view class="goods-price"><text class="text">{{item.goodsPrice}}</text>元</view><view class="goods-stock">库存 {{item.stock}}件</view></view></view></scroll-view>
</view>
.goods-container {/*底部安全区域 */padding-bottom: env(safe-area-inset-bottom);width: 100vw;height: 100vh;display: flex;flex-direction: row;box-sizing: border-box;overflow: hidden;}/* 商品栏目样式 */.flex .goods-class-list {font-size: 32rpx;font-weight: 400;color: #666666;box-sizing: border-box;}.goods-class-list .goods-class-item {width: 100%;height: 100rpx;padding-left: 30rpx;line-height: 100rpx;border-bottom: 2rpx solid #EEEEEE;}.goods-class-list .goods-class-item.selected {background-color: #EFEFEF;}/* 商品列表样式 */.goods-list {flex: 1;padding: 20rpx 20rpx 0;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;background-color: #EEEEEE;box-sizing: border-box;}.goods-list .goods-list-item {margin-bottom: 20rpx;padding: 12rpx;width: 250rpx;/* height: 350rpx; */background: #FFFFFF;border-radius: 8rpx 8rpx 8rpx 8rpx;overflow: hidden;/* 不被截断 */break-inside: avoid;display: flex;flex-direction: column;box-sizing: border-box;}.goods-list .goods-list-item .goods-img {width: 226rpx;height: 178rpx;}/* 缺货的样式 */.goods-list-item .goods-img.scarce-goods {position: relative;} .goods-list-item .goods-img.scarce-goods::before {display: block;content: "缺货";width: 98rpx;height: 30rpx;background: #333333;border-radius: 30rpx 0rpx 0rpx 0rpx;font-size: 20rpx;font-weight: 300;color: #FFFFFF;text-align: center;line-height: 30rpx;position: absolute;right: 0;bottom: 0;z-index: 10;}.goods-list .goods-list-item .goods-info {padding: 12rpx 0rpx 0rpx;box-sizing: border-box;}.goods-list-item .goods-info .goods-title {font-size: 28rpx;font-weight: 400;color: #666666;display: -webkit-box !important;overflow: hidden;word-break: break-all;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;box-sizing: border-box;}.goods-list-item .goods-info .goods-price {margin-top: 4rpx;height: 28rpx;font-size: 20rpx;font-weight: 400;color: #FF3C00;line-height: 28rpx;display: flex;align-content: center;box-sizing: border-box;}.goods-list-item .goods-info .goods-price .text {margin-right: 8rpx;font-size: 28rpx;font-weight: bold;}.goods-list-item .goods-info .goods-stock {margin-top: 8rpx;font-size: 20rpx;font-weight: 400;color: #999999;}/* 去除滚动条样式 */::-webkit-scrollbar {display: none;width: 0;height: 0;color: transparent;}
Component({/*** 组件的属性列表*/properties: {goodsClassList: {type: Array,value: []},goodsList: {type: Array,value: []}},/*** 组件的初始数据*/data: {activeIndex:0},/*** 组件的方法列表*/methods: {leftClick(e) {let index=e.currentTarget.dataset.indexlet item=e.currentTarget.dataset.itemthis.setData({activeIndex : index})this.triggerEvent('leftClick', item)},toDetails(e) {let item=e.currentTarget.dataset.itemthis.triggerEvent('toDetails', item)},scrolltolowerGoodsClass(){this.triggerEvent('scrolltolowerGoodsClass')},scrolltolowerGooodsList(){this.triggerEvent('scrolltolowerGooodsList')}}
})

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

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

相关文章

微信小程序封装组件--列表

微信小程序封装组件--列表

1&#xff0c;准备子组件–列表 // list.josn {"component": true }// list.js Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},//接收父组件的参数properties: {list: { type: Array, value: [] },},//组件…
阅读更多...
小程序列表展示

小程序列表展示

小程序列表展示 wxml代码 <view class"content"><form catchsubmit"formSuos" catchreset"formReset"><view class"group"><view class"sous"><input class"text1_3" auto-focus pl…
阅读更多...
微信小程序实现分类列表

微信小程序实现分类列表

1、效果展示 2、fenleiliebiao.wxml文件代码 <!-- 头部搜索 --> <view class"title_search"></view> <!-- 头部搜索 --> <!-- Tab布局 --> <view catchtouchmovetrue><view classnavBox><view classtitleBox1 id"…
阅读更多...
小程序 | 微信小程序实现商品分类列表

小程序 | 微信小程序实现商品分类列表

小程序 | 微信小程序实现商品分类列表 一、效果展示 二、代码实现 <!-- wxml --> <view class"container"> <!-- 商品列表 --><view class"cate"><!-- 左侧导航 --><scroll-view scroll-y class"nav-left"&g…
阅读更多...
微信小程序之多列表的显示和隐藏功能【附源码】

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

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

微信小程序显示列表数据

目录 微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告 最终效果可扫码查看 遇…
阅读更多...
微信小程序编辑与显示列表信息

微信小程序编辑与显示列表信息

在上一篇中在后台利用SpringBoot实现了对区域列表信息的增删改查操作&#xff0c;这篇将利用微信小程序完成前端与用户的交互操作。 新建一个小程序后默认含有index页面和logs页面&#xff0c;index页面会获取用户名和头像并显示&#xff0c; 通过点击头像会触发bindViewTap方…
阅读更多...
微信小程序列表筛选组件

微信小程序列表筛选组件

x效果图&#xff1a; wxml: <view class"tabTit box"><view class"flex1{{!tab[index]? active:}}" wx:for"{{tabTxt}}" wx:key"type" data-index"{{index}}" bindtap"filterTab"><text>{{it…
阅读更多...
微信小程序点击数据列表，进入列表详情页面的思路

微信小程序点击数据列表，进入列表详情页面的思路

1.在index.wxml 通过 bindtap去绑定一个事件。 对于详情页的传输数据&#xff0c;点击事件可以通过 data- 去实现&#xff0c;后面相当于是键值对&#xff0c;data-id"{{item.id}}"&#xff0c;意思是把列表的id传过去。 <view class"goods"><vi…
阅读更多...
微信小程序删除list指定列表项

微信小程序删除list指定列表项

一、删除效果展示&#xff1a; // 重要代码片段async deleteListItem(e) {const sureResult await wx.showModal({title: "提示",content: "确定要删除这项吗",});if (sureResult.confirm) {const { index } e.currentTarget.dataset;setTimeout(()>{…
阅读更多...
小程序---小程序列表项拖拽排序

小程序---小程序列表项拖拽排序

一、拖拽效果图展示 首先&#xff0c;上个gif图看看效果 吐血测试了一天&#xff0c;目前还未发现bug。ps(拖拽效果仅在前端实现&#xff0c;未和后端交互) 文章代码参考小程序实现列表拖拽排序 &#xff0c;参考文章还是存在一些bug和不足&#xff0c;比如&#xff0c;样式代…
阅读更多...
微信小程序列表页

微信小程序列表页

我们在做Android开发时,几乎每个app都有几个列表,在Android中列表一般是用listview&#xff0c;后来就使用recyclerview做了,不管是小程序还是Android或者ios&#xff0c;列表都是常见的一种数据展示方式,那么在小程序中怎么实现呢&#xff1f;先使用最笨的方法做, 如图&#…
阅读更多...
微信小程序信息展示列表

微信小程序信息展示列表

微信小程序信息展示列表 效果展示: 代码展示: wxml <view class"head"><view class"head_item">分类</view><view class"ring"></view><view class"head_item">价格</view> </view>…
阅读更多...
微信小程序列表开发-个人中心界面(一)

微信小程序列表开发-个人中心界面(一)

先放个效果图让你们看一下是不是你们需要的&#xff0c;到时候会写几篇博客把里面的组件也讲一下 .wxml .wxss .js .json 我里面的引用的照片都放在image文件里的&#xff0c;image文件是放在pages文件下面的&#xff0c;因为放的位置不同&#xff0c;图片引用的路径…
阅读更多...
JDK8-JDK17中的新特性（var类型推断、模式匹配、Record、密封类）

JDK8-JDK17中的新特性（var类型推断、模式匹配、Record、密封类）

文章目录 1. 新语法结构1.1 Java的REPL工具&#xff1a; jShell命令1.2 异常处理之try-catch资源关闭1.3 局部变量类型推断1.4 instanceof的模式匹配1.5 switch表达式1.6 文本块1.7 Record1.8 密封类 2. API的变化2.1 Optional类2.2 String存储结构和API变更2.3 JDK17&#xff…
阅读更多...
linux下安装使用dig命令

linux下安装使用dig命令

有时候用的精简版linux系统会发现没有dig命令，这时候就需要安装一下。 centos系 yum install bind-utils dig命令大多时候可以取代nslookup 简明使用，只会输出A记录(写脚本的时候容易获取ip地址) dig www.baidu.com +short只输出mx记录，简明使用 dig mx www.baidu.com…
阅读更多...
dig命令后+trace的含义

dig命令后+trace的含义

dig trace命令 dig ip 域名 类型 trace工作过程 以 dig pbc.gov.cn trace 为例。 用户看到的结果 wireshark抓包看到的结果&#xff08;只显示了查询部分&#xff0c;响应就是查询目的对源地址的响应&#xff09; 步骤源目的查询1本机ip中指定的ip.的NS2本机本地DNS.的NS…
阅读更多...
linux dig命令使用详解

linux dig命令使用详解

linux dig命令使用详解 Linux下解析域名除了使用nslookup之外&#xff0c;开可以使用dig命令来解析域名&#xff0c;dig命令可以得到更多的域名信息。dig 命令主要用来从 DNS 域名服务器查询主机地址信息。 dig的全称是 (domain information groper)。它是一个用来灵活探测DN…
阅读更多...
dig命令笔记

dig命令笔记

dig 命令全称域信息搜索器&#xff0c;是一个用于查询 DNS 域名服务器信息的命令行工具。因为dig命令灵活&#xff0c;容易使用&#xff0c;多数DNS管理员使用dig命令来诊断 DNS 问题。 dig 常用命令格式 dig [server] [-p port] [-t type] [-4] [-6] [trace] name 指定 DNS …
阅读更多...
linux中dig 命令解释

linux中dig 命令解释

dig&#xff08;域信息搜索器&#xff09;命令是个用于询问 DNS 域名服务器的灵活的工具。他执行 DNS 搜索&#xff0c;显示从受请求的域名服务器返回的答复。多数 DNS 管理员利用 dig 作为 DNS 问题的故障诊断&#xff0c;因为他灵活性好、易用、输出清楚 1、A记录&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023