Vue开发Vant组件问题

最新推荐文章于 2024-05-27 01:00:47 发布

前端小小萌虎

最新推荐文章于 2024-05-27 01:00:47 发布

阅读量789

点赞数

分类专栏：前端 VUE

本文链接：https://blog.csdn.net/m0_50967270/article/details/109804169

版权

本文详细介绍了在Vue开发中使用Vant组件，包括吸顶组件和与返回顶部功能的结合。同时，文章深入讲解了Markdown编辑器的新特性，如界面设计、代码高亮、图片拖拽、数学公式、甘特图、流程图等功能，帮助提升写作和展示效果。

摘要由CSDN通过智能技术生成

Vue开发组件问题

欢迎使用Markdown编辑器

Vant组件

①吸顶组件(搜索栏和nav导航实例)

 <van-sticky :offset-top="0">
      <van-search
        sticky
        left-icon="none"
        right-icon="none"
        background="#381111"
        v-model="searchName"
        input-align="center"
        @focus="onSearch"
        placeholder="试试搜索盒马鲜生"/>
    </van-sticky>

    <van-tabs v-model="active" :offset-top="54" scrollspy sticky>
      <van-tab v-for="(item,index) in navTab" :title="item.title" :key="index">
        <van-index-anchor index="4" :key="index">标题{
   {
    index }}</van-index-anchor>
        <div class="goods-content">
          <div class="goods-list">
            <div class="goods-item" >
              
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

②吸顶和返回顶部同时使用时候

App中html和body高度100%时候, 其他页面如果设置高100%或者min-height100%, 会导致吸顶和返回顶部其中一个会失效.  
解决方式:不设置页面高,同时不使用overflow标签.

Flex布局自动换行均等布局(三个)

    <div class="goods-content">
      <div class="goods-list" v-if="!searchStatus">
        <div class="goods-item" v-for="(item,index) in goodsList" :key="index">
          <div class="content">
            <div class="card-top">
              <img class="img" src="../../assets/home/banner.jpg" alt="">
            </div>
            <div class="name">100元卡</div>
            <div class="price">
              <div class="sale-price">￥96</div>
              <div class="old-price">￥196</div>
            </div>
            <div class="go-buy" @click="goDetails(item.id,1)">马上抢 ></div>
          </div>
        </div>
      </div>
    </div>

<style scoped lang='scss'>
.goods-content {
   
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;

  .goods-list {
   
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    padding: 0 0.5%;

    .goods-item {
   
      width: 33%;
      margin-bottom: 30px;

      &:nth-child(3n) {
   
        .content {
   
          float: right;
        }
      }

      &:nth-child(3n-1) {
   
        .content {
   
          margin: 0 auto;
        }
      }

      .content {
   
        width: 90%;
        padding-bottom: 1px;
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;

        .card-top {
   
          width: 100%;
          height: 180px;
          background-color: #FFEDE3;
          overflow: hidden;

          .img {
   
            width: 80%;
            height: 100px;
            margin: 46px auto;
          }
        }

        .name {
   
          width: 100%;
          box-sizing: border-box;
          padding: 0 14px;
          overflow: hidden;
          text-overflow: ellipsis