实现商品列表

利用组件实现…

Tabs

组件界面编写

<view class="top"><view wx:for="{{tabList}}" wx:key="index" class="title {{index == curr ? 'active':''}}" bindtap="tapwhere" data-index="{{index}}">{{item}}</view>
</view><navigator class="goods" wx:for="{{GoodsList}}" wx:key="cat_id" url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}">
<view class="img"><image src="{{item.goods_small_logo==''?'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg':item.goods_small_logo}}" mode="widthFix" />
</view>
<view class="context">{{item.goods_name}}<view class="price">￥{{item.goods_price}}</view></view>
</navigator>

组件样式

.top{display: flex;justify-content: center;
}
.top .title{display: flex;flex: auto;height: 100rpx;align-items: center;justify-content: center;border-bottom: #666666 solid 1rpx;
}
.top .active{color: var(--themeColor);border-bottom: var(--themeColor) solid 1rpx;
}
.goods{display: flex;height: 280rpx;border-bottom: #666666 solid 1rpx;
}
.goods .img{flex: 2;width: 60%;justify-content: center;
}
.goods .img image{transform: scale(0.8)
}
.goods .context{flex: 3;font-size: 30rpx;margin-top: 20rpx;
}
.goods .context .price{color: red;font-size: 40rpx;margin-top: 50rpx;
}

组件js(属性、方法)

tabList上方三个导航栏
GoodsList商品列表
curr：当前选中的导航栏下标…

// components/Tabs.js
Component({/*** 组件的属性列表*/properties: {tabList:[],GoodsList:[],curr:0},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {//处理选中的导航栏下标,实现下方红色边框跟随....tapwhere(e){this.triggerEvent('tapwhere',{index:e.target.dataset.index})}}
})

开始写列表页

引入搜索框和tab组件，并且允许下拉刷新…

{"usingComponents": {"search-input":"../../components/SearchInput/SearchInput","tab":"../../components/Tabs/Tabs"},"enablePullDownRefresh": true,"backgroundTextStyle": "dark","navigationBarTitleText": "商品列表"
}

界面编写

引用的两个组件,给tab组件传参,传递数据…

<view>
<search-input></search-input>
<tab tabList="{{tabList}}" curr="{{curr}}" GoodsList="{{GoodsList}}" bind:tapwhere="_where"></tab>
</view>

JS方法编写

data属性:

tabList：导航栏的数据

GoodsList:商品列表数据

curr:当前选中的下标

pagenum:当前页码

pagetotal：总数据量

cid 商品分类id(用于查询对应分类的id,由商品分类传递过来.)

方法:

_where:用于传递选中的选项卡下标,返回给组件…

getgoods:获取商品列表并且赋值给GoodsList

然后还有一个下拉刷新事件和上拉继续加载事件…

import {request} from '../../utils/request'
Page({/*** 页面的初始数据*/data: {tabList:['综合','销量','价格'],GoodsList:[],curr:0,pagenum:1,pagetotal:0,cid:0},_where(e){this.setData({curr:e.detail.index})},async getgoods(opt){if(opt!=undefined){console.log('有数据');this.setData({cid:opt.cid})}let ret=await request('goods/search',{pagenum:this.data.pagenum,pagesize:10,cid:this.data.cid})if(this.data.GoodsList.length!=0){var good=this.data.GoodsList;}this.setData({GoodsList:ret.data.message.goods,pagetotal:ret.data.message.total});good=[...good,...this.data.GoodsList];this.setData({GoodsList:good,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// console.log(options);this.getgoods(options)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.data.GoodsList=[];this.data.pagenum=1;this.getgoods();},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if(this.data.pagenum===Math.ceil(this.data.pagetotal/10)){wx.showToast({title: '已经没有商品啦.....',icon: 'none',duration: 2000//持续的时间})}else{wx.showToast({title: '加载中...',icon: 'loading',duration: 800//持续的时间})this.data.pagenum++;this.getgoods();}},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

效果图

刚进来时…

滑到底部时

没数据时:

下拉刷新：

成功实现~

微信小程序商城项目实战(第三篇:商品列表)相关推荐

微信小程序商城项目实战(第十一篇:商品收藏+历史浏览管理)
商品收藏+历史浏览管理商品收藏+历史浏览页面分析代码实现效果图展示商品收藏: 历史浏览: 商品收藏+历史浏览页面共用一个页面分析顶部改为"商品收藏" 上方为导航栏: ...
微信小程序商城项目实战(第七篇:生成订单支付页)
订单支付分析代码实现效果图展示分析顶部改为"支付" 上方为地址,跳转至地址管理,可修改下方为订单信息最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页 ...
微信小程序商城项目实战(第十篇:订单管理)
订单管理订单页面分析代码实现效果图展示订单详情页分析详解效果图付完款的未付款的订单页面分析顶部改为"我的订单" 上方为导航栏:全部.待付款.待发货.退款/ ...
微信小程序商城项目实战(第五篇:购物车)
实现购物车 json里边设置一下页面标题"navigationBarTitleText": "购物车" 界面组成上方由一个按钮跳转到收货地址管理, 中间为购物 ...
微信小程序商城项目实战(完结篇:意见反馈)
微信小程序商城项目完结意见反馈代码实现首先修改标题并且使用之前写好的tab组件编写界面编写样式逻辑处理js 效果图意见反馈做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界 ...
微信小程序商城项目实战(第一篇:项目搭建与首页)
商城项目第一篇项目搭建项目结构编写整个项目中需要用到的功能 request.js 全局样式组件(搜索框) 首页代码编写效果图项目搭建后端接口:https://www.showdoc.c ...
微信小程序商城项目实战(第二篇:分类页)
实现分类页修改json文件并且引入搜索框 {"usingComponents": {"search-input":"../../components ...
《微信小程序商城开发实战》笔者的新书，欢迎各位粉丝上京东购买
编辑推荐在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性牢牢地占据着移动App应用的头把交椅之位,据相关统计,微信月活跃用户已达10亿之多,且占据着中国用户30%以上的应用时间, ...
推荐一个微信小程序商城项目
推荐一款实用的微信小程序商城项目,这个项目不仅有商城基本的功能,比如:商品管理.订单管理.用户管理,还有分销功能,具备广告.优惠券等功能. 技术选型后端采用 Spring 技术栈,使用到的框架主要包 ...
微信小程序商城搭建,微信小程序商城源码,微信小程序商城项目
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序商城系统,前台用户使用小程序,小程序使用微信开发者工具开发:后台管理使用基PP+MySql的B/S架构,开发工具使用phpstor ...

微信小程序商城项目实战(第三篇:商品列表)

实现商品列表

利用组件实现…

组件界面编写

组件样式

组件js(属性、方法)

开始写列表页

界面编写

JS方法编写

效果图

微信小程序商城项目实战(第三篇:商品列表)相关推荐

最新文章

热门文章