微信小程序商城项目实战(第三篇:商品列表)_微信小程序 view 首页商品列表模板demo

实现商品列表

利用组件实现…

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 () {
 
    }
})

效果图

刚进来时…

滑到底部时

没数据时:

下拉刷新：

成功实现~