实现商品列表
利用组件实现…
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 () {
}
})
效果图
刚进来时…
滑到底部时
没数据时:
下拉刷新：
成功实现~