s-shop项目——用Vant-ui实现商品列表的展示功能（移动端）

已于 2023-10-13 10:31:11 修改
阅读量2.1k 收藏 4
点赞数 2
分类专栏： #Springboot+Vue s-shop 文章标签： 前端 javascript ajax vue.js postman html
于 2023-10-12 14:44:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_69635978/article/details/133761696
版权

目录

实现效果

项目背景

1. 主体部分效果图

实现代码：

2.  商品展示卡片模板效果图

实现代码：

3. 将商品展示卡片放入Tab标签中实现内容对应的效果

实现代码：

 4. 用axios调用商品列表接口

5. 将axios调出来的数据渲染到页面上实现效果

实现代码：

6. 实现点击加载更多（出现下一组商品） 

实现代码：

7. 实现价格排序

8.总代码

实现效果

product03

项目背景

使用到的是s-shop(主页资源有)的后端接口

1. 主体部分效果图

实现代码：

<template>
  <div id="product">

<!--  使用NavBar导航栏组件  -->
    <div id="navBar">
      <van-nav-bar title="商品列表" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>

<!--  使用Tab标签组件  -->
    <div id="head">
      <van-tabs v-model="active">
        <van-tab title="综合" name="a"></van-tab>
        <van-tab title="价格" name="b"></van-tab>
        <van-tab title="热门" name="c"></van-tab>
      </van-tabs>
    </div>

<!--  使用Tabbar标签栏组件  -->
    <div id="tabbar">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item icon="clock-o">签到</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>

export default {
  name: "product",
  data(){
    return{
      active: 0,
    }
  },
  mounted() {

  },
  methods:{
  }
}
</script>

<style scoped>

#navBar{
  margin-top: 10px;
}
#head{
  padding: 10px;
  margin: 10px
}
</style>

2.  商品展示卡片模板效果图

实现代码：

    <!--  使用宫格组件，实现商品的展示  -->
    <div>
      <van-grid :border="true" :column-num="2" class="grid">
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg"/>
          <p style="margin-top: 5px">123</p>
          <p style="color: orange;margin-top: 2px">123</p>
        </van-grid-item>
      </van-grid>
    </div>


<style scoped>

.grid {
  border: #E5E5E5;
  margin: 5px;
  padding: 3px;
}

</style>

3. 将商品展示卡片放入Tab标签中实现内容对应的效果

product01

实现代码：

  <!--  使用Tab标签组件  -->
    <div id="head">
      <van-tabs v-model="active">
        <van-tab title="综合" name="a">
          <!--  使用宫格组件，实现商品的展示  -->
          <div>
            <van-grid :border="true" :column-num="2" class="grid">
              <van-grid-item>
                <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg"/>
                <p style="margin-top: 5px">1111111</p>
                <p style="color: orange;margin-top: 2px">123</p>
              </van-grid-item>
            </van-grid>
          </div>
        </van-tab>
        <van-tab title="价格" name="b">
          <!--  使用宫格组件，实现商品的展示  -->
          <div>
            <van-grid :border="true" :column-num="2" class="grid">
              <van-grid-item>
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg"/>
                <p style="margin-top: 5px">222222</p>
                <p style="color: orange;margin-top: 2px">123</p>
              </van-grid-item>
            </van-grid>
          </div>
        </van-tab>
        <van-tab title="热门" name="c">
          <!--  使用宫格组件，实现商品的展示  -->
          <div>
            <van-grid :border="true" :column-num="2" class="grid">
              <van-grid-item>
                <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg"/>
                <p style="margin-top: 5px">33333</p>
                <p style="color: orange;margin-top: 2px">123</p>
              </van-grid-item>
            </van-grid>
          </div>
         </van-tab>
      </van-tabs>
    </div>

 4. 用axios调用商品列表接口

用axios调用接口代码

var fSize = 10;
export default {
  name: "product",
  data() {
    return {
      product: [],
      //请求体参数
      form: {
        size: fSize,
        current: 1
      }
    }
  },
  mounted() {
    this.getproduct(this.form)
    this.form.size = fSize;
  },
  methods: {
    getproduct(form) {
      var that = this;
      //用axios实现接口调用，并在控制台将取得的数据打印出来
      this.axios.post("/api/product",form).then(function (response) {
        that.product = response.data;
        console.log(response.data)
      })
    }
  }
}

5. 将axios调出来的数据渲染到页面上实现效果

实现代码：

          <!--  使用宫格组件，实现商品的展示  -->
          <div>
            <van-grid :border="true" :column-num="2" class="grid">
              <!--      使用for循环将数据便利到之前的展示模板上        -->
              <van-grid-item v-for="(i,inx) in product" :key="inx">
                <van-image :src="`http://127.0.0.1:8081/api`+ i.mainImage"/>
                <p style="margin-top: 5px">{{ i.name }}</p>
                <p style="color: orange;margin-top: 2px">￥ {{ i.price }}</p>
              </van-grid-item>
                <p style="margin-bottom: 100px;margin-left:40%">点击加载更多</p>
            </van-grid>
          </div>
        </van-tab>

6. 实现点击加载更多（出现下一组商品） 

product02

实现代码：

    getproduct(form) {
      var that = this;
      //用axios实现接口调用，并在控制台将取得的数据打印出来
      return this.axios.post("/api/product", form).then(function (response) {
        that.product = response.data;
        //使用concat方法将获得的数据拼接到productList上
        that.productList = that.productList.concat(that.product);
      })
    },

    getNewPage() {
      var that = this;
      //得到下一组数据
      let currentPage = that.page + 1
      // console.log(currentPage)
      that.form.current = that.form.size * (currentPage - 1) + 1
      this.getproduct(that.form)
      //当前的页数，主要是用来计数
      that.page++
      // console.log(that.productList)
    },

7. 实现价格排序

that.priceProduct = that.productList.toSorted((a, b) => a.price - b.price)

8.总代码

<template>
  <div id="product">

    <!--  使用NavBar导航栏组件  -->
    <div id="navBar">
      <van-nav-bar title="商品列表" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18"/>
        </template>
      </van-nav-bar>
    </div>

    <!--  使用Tab标签组件  -->
    <div id="head">
      <van-tabs v-model="active">
        <van-tab title="综合" name="a">
          <!--  使用宫格组件，实现商品的展示  -->
          <div>
            <van-grid :border="true" :column-num="2" class="grid">
              <!--      使用for循环将数据便利到之前的展示模板上        -->
              <van-grid-item v-for="(i,inx) in productList" :key="inx">
                <van-image :src="`http://127.0.0.1:8081/api`+ i.mainImage"/>
                <p style="margin-top: 5px">{{ i.name }}</p>
                <p style="color: orange;margin-top: 2px">￥ {{ i.price }}</p>
              </van-grid-item>
              <p style="margin-bottom: 100px;margin-left:40%" @click="getNewPage()">点击加载更多</p>
            </van-grid>
          </div>
        </van-tab>

        <van-tab title="价格" name="b">
          <template #title> 价格
            <van-icon name="sort"/>
          </template>
          <!--  使用宫格组件，实现商品的展示  -->
          <div>
            <van-grid :border="true" :column-num="2" class="grid">
              <!--      使用for循环将数据便利到之前的展示模板上        -->
              <van-grid-item v-for="(i,inx) in priceProduct" :key="inx">
                <van-image :src="`http://127.0.0.1:8081/api`+ i.mainImage"/>
                <p style="margin-top: 5px">{{ i.name }}</p>
                <p style="color: orange;margin-top: 2px">￥ {{ i.price }}</p>
              </van-grid-item>
              <p style="margin-bottom: 100px;margin-left:40%" @click="getNewPage()">点击加载更多</p>
            </van-grid>
          </div>
        </van-tab>

        <van-tab title="热门" name="c">
          <!--  使用宫格组件，实现商品的展示  -->
          <div>
            <van-grid :border="true" :column-num="2" class="grid">
              <van-grid-item v-for="(i,inx) in hotProductList" :key="inx">
                <van-image :src="`http://127.0.0.1:8081/api`+ i.mainImage"/>
                <p style="margin-top: 5px">{{ i.name }}</p>
                <p style="color: orange;margin-top: 2px">￥ {{ i.price }}</p>
              </van-grid-item>
              <p style="margin-bottom: 100px;margin-left:40%" @click="getHotPage()">点击加载更多</p>
            </van-grid>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!--  使用Tabbar标签栏组件  -->
    <div id="tabbar">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item icon="clock-o">签到</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>

var fSize = 10;
export default {
  name: "product",
  data() {
    return {
      active: 0,
      product: [],
      productList: [],
      hotProduct: [],
      hotProductList: [],
      priceProduct: [],
      page: 1,
      hotPage: 1,
      activateId: 0,
      //请求体参数
      form: {
        size: fSize,
        current: 1
      }
    }
  },
  mounted() {
    this.getproduct(this.form)
    this.form.size = fSize
    this.getHotProduct(this.form)
  },

  methods: {
    getproduct(form) {
      var that = this;
      //用axios实现接口调用，并在控制台将取得的数据打印出来
      return this.axios.post("/api/product", form).then(function (response) {
        that.product = response.data;
        //使用concat方法将获得的数据拼接到productList上
        that.productList = that.productList.concat(that.product)
        //升序，用到比较方法相比sort, toSorted不会改变原数组的顺序
        that.priceProduct = that.productList.toSorted((a, b) => a.price - b.price)
        //  降序
        //   that.priceProduct = that.productList.toSorted((a,b) => b.price - a.price)
      })
    },

    getNewPage() {
      var that = this;
      //得到下一组数据
      let currentPage = that.page + 1
      // console.log(currentPage)
      that.form.current = that.form.size * (currentPage - 1) + 1
      this.getproduct(that.form)
      //当前的页数，主要是用来计数
      that.page++
      // console.log(that.productList)
    },

    getHotProduct(form) {
      var that = this;
      this.axios.post('/api/product/getHot', form).then(function (response) {
        that.hotProduct = response.data
        that.hotProductList = that.hotProductList.concat(that.hotProduct);
        // console.log(response.data)
      })
    }
    ,

    getHotPage() {
      var that = this;
      //得到下一组数据
      let newPage = that.hotPage + 1
      that.form.current = that.form.size * (newPage - 1) + 1
      this.getHotProduct(that.form)
      that.hotPage++
      // console.log(this.getHotProduct(that.form));
    }
  }
}
</script>

<style scoped>

#navBar {
  margin-top: 10px;
}

#head {
  padding: 10px;
  margin: 10px
}

.grid {
  border: #E5E5E5;
  margin: 5px;
  padding: 3px;
}

</style>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值