⼩程序开发⼀个⼩型商城（四、商品列表）
在从上⼀个界⾯跳转过来，会看到商品列表这个界⾯：如下图所⽰：
页⾯分析：从上到下：分别是⼀个已经定义好的⾃定义组件，下⾯的综合，销量，也是⼀个⾃定义组件。下⾯商品的⼀个个的⼩框框就是⼀个个的navigetor。
⾃定义组件
使⽤已经定义好了的组件。先在category/index/index.json⽂件引⼊组件，随后在wxml⽂件当中直接调⽤组件即可。同理定义⼀个Tabs组件：
最开始我们需要在good_list/index.js⽂件下的data⾥⾯加上⼀个数组，⽤于tabs组件渲染：
tabs:[
{
id:0,
value:"综合",
isActive:true
},
{
id:1,
value:"销量",
isActive:false
},
{
id:2,
value:"价格",
isActive:false
}
],
随后回到Tabs组件当中定义wxml⽂件，静态页⾯以及渲染tabs数组
<view class="tabs">
<view class="tabs_title">
<view wx:for="{{tabs}}"
wx:key="id"
class="title_item  {{item.isActive?'active':''}}"
bindtap = "handleItemTap"
data-index="{{index}}"
>
{{item.value}}
</view>
</view>
<view class="tabs-content">
<slot></slot>
</view>
</view>
加上些许样式：display使其在同⼀⾏显⽰，active 是否选中，选中后加上下标颜⾊
.tabs_title{
display: flex;
}
.title_item{
display: flex;
justify-content: center;
align-items: center;
flex:1;
padding:15rpx 0;
}
.active{
color:var(--themeColor);
border-bottom:5px solid currentColor;
}
在这种需要绑定事件的⾃定义组件当中，先在properties下声明tabs数组的类型和值
tabs:{
type: Array,
value:[]
}
随后编写点击事件，获取index索引改变isActive的值，从⽽改变下标颜⾊，在method下⾯编写
handleItemTap(e){
//获取点击的索引
制作查询类小程序const{index}=e.currentTarget.dataset;
console.log(index)
//触发⽗组件的⾃定义事件
}
在都写完后不要忘记在goods_list/index.json⽂件当中调⽤这个组件
商品列表
对不同的tabs所对应不同的商品列表使⽤block占位符进⾏隔开，以及获取左侧图标的地⽅，在部分商品当中可能会缺失图标，使⽤？：的形式加上⼀张图⽚，以及需要绑定⼀个单击事件使得跳转到商品详情页⾯和⼀个标题的⾃定义事件，
<SearchInput></SearchInput>
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
<block wx:if="{{tabs[0].isActive}}">
<view class="frist_tab">
<navigator class="goods_item" wx:for="{{goodslist}}"  url="../goods_detail/main?goods_id={{ds_id}}" wx:key="goods_id">
<!--左侧图⽚-->
<view class="goods_img_wrap">
<image
src="{{ds_small_ds_small_logo:'image1.suning/uimg/b2c/newcatentries/0000000000-000000000601395527 _1_400x400.jpg'}}"
mode="widthFix" />
</view>
<!--右侧商品-->
<view class="goods_info_wrap">
<view class="goods_name">{{ds_name}}</view>
<view class="goods_price">￥{{ds_price}}</view>
</view>
</navigator>
</view>
</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
</Tabs>
随后就是给标签加上样式，使得⼀个商品占据整个宽，⾼度都⼀致，左侧图⽚占据多宽？右侧⽂字只显⽰俩⾏，多余的⽤...代替，和最后的商品价格为红⾊字体，⼀样使⽤less的⽅式：代码如下
.frist_tab{
.goods_item{
display: flex;
border-bottom: 1px solid #ccc;
.goods_img_wrap{
flex: 2;
display: flex;
justify-content: center;
align-items: center;
image{
width: 70%;
}
}
.goods_info_wrap{
flex: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
.goods_name{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp: 2;
}
.goods_price{
color: var(--themeColor);
font-size: 32rpx;
}
}
}
}
商品列表事件详情
在这⾥使⽤到了es7语法，使⽤这个语法的时候，⾸先需要⼀⼤段代码， （懒得地址下载的地⽅了，直接上传到⼤学城上得了）在与pages同层级⽬录下新建⼀个lib⽂件夹，将代码复制粘贴进去。且勾选es6转es5语法
最后在goods_list下的index.js⽂件⾥⾯导⼊⽂件使⽤代码：
import{ request }from"../../request/index.js";
import regeneratorRuntime from'../../lib/runtime/runtime';
在data⾥⾯定义变量：商品列表⽤于渲染，条数⽤于判断是否还可以翻页。
//商品列表
goodslist:[],
//总页⾯的条数
tatal:0
data同层级下定义参数：接⼝链接余姚传递的参数：分别是：通过关键字查询的参数query、通过商品id查询的参数cid、初始页码pagesnum为1、⼀页有多少条数据pagesize为10
//接⼝要的参数
cid:0,
QueryParams:{
query:"",
cid:"",
pagenum:1,
pagesize:10
},
标题⾃定义事件：根据传过来的index判断哪⼀个⼩标题标红
//标题的⾃定义事件
handleTabsItemChange(e){
//console.log(e)
//获取索引值
const{ index }= e.detail;
let{ tabs }=this.data;
tabs.forEach((v, i)=> i === index ? v.isActive =true: v.isActive =false);
this.setData({
tabs
})
},
获取商品列表的函数，并且计算分页，⼀页10条数据，每⼀个界⾯共有多少条数据？在network当中即可查看，如下图；到这个json⽂件，点开即可看到total的值为38
具体代码如下：在最后给goodslist数组赋值：使⽤拼接的⽅式。
async GetGoodsList(){
const res =await request({url:"/goods/search",data:this.QueryParams});
const total = al
console.alPages)
this.setData({
goodslist:[...dslist,...ds]
})
//关闭下拉刷新的窗⼝
wx.stopPullDownRefresh();
},
到最后在onLoad函数⾥⾯调⽤即可：
this.QueryParams.cid = options.cid||"";
this.GetGoodsList();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。