uni-app开发小程序,笔记记录5 商品列表

最新推荐文章于 2024-06-20 22:03:11 发布

a136447572

最新推荐文章于 2024-06-20 22:03:11 发布

阅读量621

点赞数

分类专栏：小程序文章标签：小程序 uni-app 微信小程序

本文链接：https://blog.csdn.net/a136447572/article/details/129461017

版权

小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
uniapp - 黑马优购笔记地址

在这里插入图片描述

知识点
1 创建组件
在这里插入图片描述
2 使用组件

3 设置传入参数与data() 同级 props 中

	goods: {
        type: Object,  //类型
        default: {}    // 默认值
      }

4 图片默认值
在这里插入图片描述

   <image class="itemImage" :src="goods.goods_small_logo || defaultPic"></image>

在这里插入图片描述
5 配置上拉加载 ,和底部刷新

图中包含 ,底部,顶部的相关操作逻辑

6 其他知识点 ,加深记忆
在这里插入图片描述

源码


good_list
<template>
  <view>
     
   <view v-for="(item , index) in goodsList" :key="index" @click="itemClick(item)">
     <my-goods :goods="item"></my-goods>
     
    </view>
   
  </view>
</template>

<script>

  export default {
    data() {
      return {
        queryObj: {
          query: '',
          cid: '',
          pagenum: 1,
          pagesize: 10
        },
        goodsList: [],
        total: 0,
        isLoading : false
      }
    },
    onLoad(options) {
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      this.getGoodsList()
    },
    methods: {

      async getGoodsList(cb) {

        this.isLoading = true
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        
        this.isLoading = false
        cb && cb()
        if (res.meta.status !== 200) return uni.$showMsg()

        this.goodsList = [...this.goodsList , ...res.message.goods]
        this.total = res.message.total

        console.log(this.goodsList)
      } 
      ,
      itemClick(item){
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
        })
      }

    }
    ,
    onReachBottom(){
       if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')

      if(this.isLoading) return 
      this.queryObj.pagenum +=1
      
      this.getGoodsList()
    },
    onPullDownRefresh(){
      if(this.isLoading) return 
      
      this.queryObj.pagenum = 1 
      this.total = 0
      this.goodsList = []
      
      this.getGoodsList(()=>{
        uni.stopPullDownRefresh()
      })
    }
    
  }
</script>

<style lang="scss">


</style>


my-goods
<template>
  <view>

    <view class="itemLayout">

      <image class="itemImage" :src="goods.goods_small_logo || defaultPic"></image>
      <view class="itemRightLayout">
        <view class="itemTitle">
          {{goods.goods_name }}
        </view>
        <view class="itemPrice">  ¥{{ goods.goods_price | tofixedNew }} </view>
 
      </view>

    </view>

  </view>
</template>

<script>
  export default {
    name: "my_goods",
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
      }
    },
    
    props: {
      goods: {
        type: Object,
        default: {}
      }
    },
    methods:{
      
    },
    filters:{
      tofixedNew(num){
        return Number(num)+1
      }
    },
   
  }
</script>

<style lang="scss">
  .itemLayout {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    border-bottom: 1px solid #efefef;
    margin-bottom: 20rpx;

    .itemImage {
      width: 80px;
      height: 60px;
    }

    .itemRightLayout {

      flex: 1;
      display: flex;
      height: 60px;
      flex-direction: column;
      font-size: 24rpx;
      margin-left: 16rpx;
      margin-right: 16rpx;
      justify-content: space-between;

      .itemPrice {
        color: #C00000;
      }
    }
  }
</style>