vant搭建页面的小例子

tj_mao

已于 2022-10-04 21:53:43 修改

阅读量999

点赞数

分类专栏： Vant 文章标签： javascript vue.js 前端

于 2022-10-04 11:08:22 首次发布

本文链接：https://blog.csdn.net/weixin_56220718/article/details/127160252

版权

Vant 专栏收录该内容

2 篇文章

订阅专栏

vant-domo

一、代码
二、实现页面效果

一、代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

  <!-- 自定义样式 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      color: #333;
      background-color: #f8f8f8;
    }

    .goods {
      padding-bottom: 50px;
    }

    .goods-swipe img {
      width: 100%;
      display: block;
    }

    .goods-title {
      font-size: 16px;
    }

    .goods-price {
      color: #f44;
    }

    .goods-express {
      font-size: 12px;
      padding: 5px 15px;
    }

    .goods-cell-group {
      margin: 15px 0;
    }

    .goods-tag {
      margin-left: 5px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="goods">
      <!-- 轮播图vant组件 -->
      <van-swipe class="goods-swipe" :autoplay="3000">
        <!-- <van-swipe-item><img :src="goods.thumb[0]" alt=""></van-swipe-item>
        <van-swipe-item><img :src="goods.thumb[1]" alt=""></van-swipe-item> -->
        <van-swipe-item v-for="(item,index) in goods.thumb"><img :src="item" alt=""></van-swipe-item>
      </van-swipe>

      <!-- cell单元格 -->
      <van-cell-group>
        <!-- <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" /> -->
        <van-cell>
          <div class="goods-title">{{ goods.title }}</div>
          <div class="goods-price">{{ formatPrice() }}</div>
        </van-cell>
        <van-cell class="goods-express">
          <van-col span="10">运费：{{ goods.express }}</van-col>
          <van-col span="14">剩余：{{ goods.remain }}</van-col>
        </van-cell>
      </van-cell-group>

      <!-- 有赞的店--查看商品详情 -->
      <van-cell-group class="goods-cell-group">
        <van-cell value="进入店铺" is-link icon="shop-o" @click="enterShop">
          <!-- 自定义van-cell的title属性 -->
          <template slot="title">
            <span>有赞的店</span>
            <van-tag class="goods-tag" type="danger">官方</van-tag>
          </template>
        </van-cell>
        <van-cell title="查看商品详情" is-link showGoodDetail @click="showGoodDetail" />
      </van-cell-group>

      <!-- ActionBar 动作栏 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" @click="showChat">
          客服
        </van-goods-action-icon>
        <van-goods-action-icon icon="cart-o" @click="showCart">
          购物车
        </van-goods-action-icon>
        <van-goods-action-button type="warning" @click="addCart">
          加入购物车
        </van-goods-action-button>
        <van-goods-action-button type="danger" @click="buy">
          立即购买
        </van-goods-action-button>
      </van-goods-action>

    </div>
  </div>

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

  <script>
    // 初始化vue实例
    new Vue({
      el: '#app',
      data: {
        goods: {
          title: '美国伽力果 (约680g/3个)',
          price: 2680,
          express: '免运费',
          remain: 19,
          thumb: [
            'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
            'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
          ]
        }
      },
      methods: {
        test() {
          console.log(vant);
        },

        formatPrice() {
          return '￥' + (this.goods.price / 100).toFixed(2)
        },

        enterShop() {
          vant.Toast('进入店铺')
        },

        showGoodDetail() {
          vant.Toast('查看商品详情')
        },

        showChat() {
          vant.Toast('进入客服页面')
        },

        showCart() {
          vant.Toast('进入购物车页面')
        },

        addCart() {
          vant.Toast('加入购物车')
        },

        buy() {
          vant.Toast('立即购买')
        }
      }
    })
  </script>
</body>

</html>

<!-- 

  Toast 轻提示组件
 -->