6.闲置、求购页面

最新推荐文章于 2024-09-11 14:09:02 发布

不蒸馒头曾口气

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量1.2k

点赞数 31

分类专栏：二手交易平台文章标签： vue html javascript node.js uni-app

本文链接：https://blog.csdn.net/qq_62652856/article/details/136728328

版权

二手交易平台专栏收录该内容

21 篇文章 0 订阅

订阅专栏

闲置页面

搜索框

与首页搜索框一致

uview官网
https://vkuviewdoc.fsq.pub/components/search.html

搜索框
<u-search :show-action="true" action-text="搜索" :animation="true"></u-search>

增加外边距margin="20rpx 0rpx"

tabs标签

uview官网
https://vkuviewdoc.fsq.pub/components/tabs.html

tabs

<u-tabs name="cate_name" count="cate_count" :list="list" :is-scroll="false" v-model="current" @change="change"></u-tabs>

页面

import { ref } from 'vue';
  const tabList = ref([{
    cate_name: '全部'
  },{
    cate_name: '手机'
  },{
    cate_name: '电脑'
  },{
    cate_name: '衣服'
  },{
    cate_name: '鞋子'
  },{
    cate_name: '图书'
  },{
    cate_name: '时尚'
  },{
    cate_name: '手作'
  },{
    cate_name: '其他'
  }])

属性定义

//tabs属性
//v-model	指定哪个tab为激活状态,current=0则默认从第0个开始
const current = ref(0)

scss样式

<style lang="scss">
  .tab-tabs {
    position: sticky;
    /* 粘性布局 固定定位 */
    z-index: 99;
    /* CSS z-index 属性设置定位元素及其后代元素或 flex 
    项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
     层级关系*/
    top: 0;
    left: 0;
  }
</style>

效果图

在这里插入图片描述

样式调整

将is-scroll="false"改为true，使tabs可以左右滑动
active-color 滑块和激活tab文字的颜色(默认#2979ff)改为active-color="#3e89f8"
inactive-color tabs文字颜色(默认#303133)改为inactive-color="#000"
font-size tab文字大小，单位rpx (默认30)

<u-tabs font-size="35" active-color="#3e89f8" inactive-color="#000" name="cate_name" count="cate_count" :list="tabList" :is-scroll="true" v-model="current"
        @change="change"></u-tabs>

瀑布流

与首页瀑布流一致
(修改了部分样式)

unused.vue代码

<template>
  <view class="u-wrap">
    <view class="top">
      <!-- 搜索框 -->
      <view class="tab-search">
        <!-- flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数。为使搜索框沾满 -->
        <u-search style="flex-grow: 1;" margin="20rpx 0rpx" :show-action="true" action-text="搜索" :animation="true"></u-search>
      </view>
      
      <view class="tab-tabs">
        <!-- is-scroll	tabs是否可以左右拖动   
        v-model	指定哪个tab为激活状态-->
        <u-tabs font-size="35" active-color="#3e89f8" inactive-color="#000" name="cate_name" count="cate_count"
          :list="tabList" :is-scroll="true" v-model="current" @change="change"></u-tabs>
      </view>
    </view>
   

    <!-- 瀑布流 -->
    <view class="">
      <u-waterfall v-model="flowList" ref="uWaterfall1">
        <template v-slot:left="{leftList}">
          <!-- flowList里装着瀑布流的数据 -->
          <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
            <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
            <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
            <view class="demo-title">
              {{item.title}}
            </view>
            <view class="demo-price">
              {{item.price}}元
            </view>
            <view class="demo-tag">
              <view class="demo-tag-owner">
                自营
              </view>
              <view class="demo-tag-text">
                放心购
              </view>
            </view>
            <view class="demo-shop">
              {{item.shop}}
            </view>
            <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
              @click="remove(item.id)"></u-icon>
          </view>
        </template>
        <template v-slot:right="{rightList}">
          <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
            <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
            <view class="demo-title">
              {{item.title}}
            </view>
            <view class="demo-price">
              {{item.price}}元
            </view>
            <view class="demo-tag">
              <view class="demo-tag-owner">
                自营
              </view>
              <view class="demo-tag-text">
                放心购
              </view>
            </view>
            <view class="demo-shop">
              {{item.shop}}
            </view>
            <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
              @click="remove(item.id)"></u-icon>
          </view>
        </template>
      </u-waterfall>
      <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
    </view>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const tabList = ref([{
    cate_name: '全部'
  }, {
    cate_name: '手机'
  }, {
    cate_name: '电脑'
  }, {
    cate_name: '男装'
  }, {
    cate_name: '女装'
  }, {
    cate_name: '鞋子'
  }, {
    cate_name: '食品'
  }, {
    cate_name: '运动'
  }, {
    cate_name: '美妆'
  }, {
    cate_name: '百货'
  }, {
    cate_name: '图书'
  }, {
    cate_name: '时尚'
  }, {
    cate_name: '手作'
  }, {
    cate_name: '其他'
  }])
  //tabs属性
  //v-model	指定哪个tab为激活状态,current=0则默认从第0个开始
  const current = ref(0)
  
  //瀑布流数据
  const flowList = ref([{
      price: 2000,
      title: 'ipad pro 11',
      image: '/static/cs1.jpg'
    },
    {
      price: 1234,
      title: '手机',
      image: '/static/cs2.jpg'
    },
    {
      price: 2345,
      title: '手机',
      image: '/static/cs3.jpg'
    },
    {
      price: 60,
      title: '手表',
      image: '/static/cs4.jpg'
    },
    {
      price: 3421,
      title: '联想小新电脑',
      image: '/static/cs5.jpg'
    },
    {
      price: 2000,
      title: 'ipad pro 11',
      image: '/static/cs1.jpg'
    },
    {
      price: 1234,
      title: '手机',
      image: '/static/cs2.jpg'
    },
    {
      price: 2345,
      title: '手机',
      image: '/static/cs3.jpg'
    },
    {
      price: 60,
      title: '手表',
      image: '/static/cs4.jpg'
    },
    {
      price: 3421,
      title: '联想小新电脑',
      image: '/static/cs5.jpg'
    }
  ])
  
</script>

<style lang="scss">
  .top{
    position: sticky;
    /* 粘性布局 固定定位 */
    z-index: 99;
    /* CSS z-index 属性设置定位元素及其后代元素或 flex 
    项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
     层级关系*/
    top: 0;
    left: 0;
    background-color: #ffffff;
  }
  /* 搜索框样式 */
  .tab-search {
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    /* 弹性布局  居中显示 */
    // background-color: #f2f2f2;
  }
  
  .tab-tabs {
    position: sticky;
    /* 粘性布局 固定定位 */
    // z-index: 99;
    /* CSS z-index 属性设置定位元素及其后代元素或 flex 
    项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
     层级关系*/
    top: 0;
    left: 0;
  }
  
  /* 瀑布流样式 */
  .demo-warter {
    border: 3px solid #f1f1f1;
    border-radius: 8px;
    margin: 4px 2px;
    background-color: #ffffff;
    padding: 9px;
    position: relative;
  }
  
  .u-close {
    position: absolute;
    top: 36rpx;
    right: 22rpx;
  }
  
  .demo-image {
    width: 100%;
    border-radius: 4px;
  }
  
  .demo-title {
    font-size: 34rpx;
    margin-top: 5px;
    color: $u-main-color;
  }
  
  .demo-tag {
    display: flex;
    margin-top: 7px;
  }
  
  .demo-tag-owner {
    background-color: $u-type-primary;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 7rpx 14rpx;
    border-radius: 50rpx;
    font-size: 25rpx;
    line-height: 1.2;
  }
  
  .demo-tag-text {
    border: 1px solid $u-type-success;
    color: $u-type-success;
    margin-left: 10px;
    border-radius: 50rpx;
    line-height: 1.2;
    padding: 7rpx 14rpx;
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    font-size: 25rpx;
  }
  
  .demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
  }
  
  .demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
  }
</style>

效果图

在这里插入图片描述

求购页面

求购页面与闲置页面类似
故先粘贴复制，再修改样式

buy.vue代码

<template>
  <view class="u-wrap">
    <view class="top">
      <!-- 搜索框 -->
      <view class="tab-search">
        <!-- flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数。为使搜索框沾满 -->
        <u-search style="flex-grow: 1;" margin="20rpx 0rpx" :show-action="true" action-text="搜索" :animation="true"></u-search>
      </view>
      
      <view class="tab-tabs">
        <!-- is-scroll	tabs是否可以左右拖动   
        v-model	指定哪个tab为激活状态-->
        <u-tabs font-size="35" active-color="#3e89f8" inactive-color="#000" name="cate_name" count="cate_count"
          :list="tabList" :is-scroll="true" v-model="current" @change="change"></u-tabs>
      </view>
    </view>
   

    <!-- 瀑布流 -->
    <view class="">
      <u-waterfall v-model="flowList" ref="uWaterfall1">
        <template v-slot:left="{leftList}">
          <!-- flowList里装着瀑布流的数据 -->
          <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
            <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
            <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
            <view class="demo-title">
              {{item.title}}
            </view>
            <view class="demo-price">
              {{item.price}}元
            </view>
            <view class="demo-tag">
              <view class="demo-tag-owner">
                自营
              </view>
              <view class="demo-tag-text">
                诚心求购
              </view>
            </view>
            <view class="demo-shop">
              {{item.shop}}
            </view>
            <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
              @click="remove(item.id)"></u-icon>
          </view>
        </template>
        <template v-slot:right="{rightList}">
          <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
            <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
            <view class="demo-title">
              {{item.title}}
            </view>
            <view class="demo-price">
              {{item.price}}元
            </view>
            <view class="demo-tag">
              <view class="demo-tag-owner">
                自营
              </view>
              <view class="demo-tag-text">
                诚心求购
              </view>
            </view>
            <view class="demo-shop">
              {{item.shop}}
            </view>
            <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
              @click="remove(item.id)"></u-icon>
          </view>
        </template>
      </u-waterfall>
      <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
    </view>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const tabList = ref([{
    cate_name: '全部'
  }, {
    cate_name: '手机'
  }, {
    cate_name: '电脑'
  }, {
    cate_name: '男装'
  }, {
    cate_name: '女装'
  }, {
    cate_name: '鞋子'
  }, {
    cate_name: '食品'
  }, {
    cate_name: '运动'
  }, {
    cate_name: '美妆'
  }, {
    cate_name: '百货'
  }, {
    cate_name: '图书'
  }, {
    cate_name: '时尚'
  }, {
    cate_name: '手作'
  }, {
    cate_name: '其他'
  }])
  //tabs属性
  //v-model	指定哪个tab为激活状态,current=0则默认从第0个开始
  const current = ref(0)
  
  //瀑布流数据
  const flowList = ref([{
      price: 2000,
      title: 'ipad pro 11',
      image: '/static/cs1.jpg'
    },
    {
      price: 1234,
      title: '手机',
      image: '/static/cs2.jpg'
    },
    {
      price: 2345,
      title: '手机',
      image: '/static/cs3.jpg'
    },
    {
      price: 60,
      title: '手表',
      image: '/static/cs4.jpg'
    },
    {
      price: 3421,
      title: '联想小新电脑',
      image: '/static/cs5.jpg'
    },
    {
      price: 2000,
      title: 'ipad pro 11',
      image: '/static/cs1.jpg'
    },
    {
      price: 1234,
      title: '手机',
      image: '/static/cs2.jpg'
    },
    {
      price: 2345,
      title: '手机',
      image: '/static/cs3.jpg'
    },
    {
      price: 60,
      title: '手表',
      image: '/static/cs4.jpg'
    },
    {
      price: 3421,
      title: '联想小新电脑',
      image: '/static/cs5.jpg'
    }
  ])
  
</script>

<style lang="scss">
  .top{
    position: sticky;
    /* 粘性布局 固定定位 */
    z-index: 99;
    /* CSS z-index 属性设置定位元素及其后代元素或 flex 
    项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
     层级关系*/
    top: 0;
    left: 0;
    background-color: #ffffff;
  }
  /* 搜索框样式 */
  .tab-search {
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    /* 弹性布局  居中显示 */
    // background-color: #f2f2f2;
  }
  
  .tab-tabs {
    position: sticky;
    /* 粘性布局 固定定位 */
    // z-index: 99;
    /* CSS z-index 属性设置定位元素及其后代元素或 flex 
    项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
     层级关系*/
    top: 0;
    left: 0;
  }
  
  /* 瀑布流样式 */
  .demo-warter {
    border: 3px solid #f1f1f1;
    border-radius: 8px;
    margin: 4px 2px;
    background-color: #ffffff;
    padding: 9px;
    position: relative;
  }
  
  .u-close {
    position: absolute;
    top: 36rpx;
    right: 22rpx;
  }
  
  .demo-image {
    width: 100%;
    border-radius: 4px;
  }
  
  .demo-title {
    font-size: 34rpx;
    margin-top: 5px;
    color: $u-main-color;
  }
  
  .demo-tag {
    display: flex;
    margin-top: 7px;
  }
  
  .demo-tag-owner {
    background-color: $u-type-primary;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 7rpx 14rpx;
    border-radius: 50rpx;
    font-size: 25rpx;
    line-height: 1.2;
  }
  
  .demo-tag-text {
    border: 1px solid $u-type-warning;
    color: $u-type-warning;
    margin-left: 10px;
    border-radius: 50rpx;
    line-height: 1.2;
    padding: 7rpx 14rpx;
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    font-size: 25rpx;
  }
  
  .demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
  }
  
  .demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
  }
</style>

效果图

在这里插入图片描述

改进

解决手机tabs滚动条问题

添加代码

 //去掉tabs滚动条
  scroll-view ::v-deep ::-webkit-scrollbar{
    width: 0;
    height: 0;
    clear: transparent;
  }

不蒸馒头曾口气

关注

31
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录