首页 > 其他分享 >6.闲置、求购页面

6.闲置、求购页面

时间：2024-03-15 09:29:21浏览次数：19  
标签：cate title color 求购 price 闲置 页面 image name

闲置页面

搜索框

与首页搜索框一致

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;
  }

标签：cate,title,color,求购,price,闲置,页面,image,name
From： https://blog.csdn.net/qq_62652856/article/details/136728328

相关文章

  • vue中router页面之间参数传递,params失效,建议使用query
    vue中router页面之间参数传递,params失效,建议使用query简介：本文讲解vue中router页面之间参数传递,params失效,建议使用query。在vue中有一个router功能，他可以用来页面之间的参数传递，他有两种方式一种是params方式，一种是query方式，但是params方式特别容易导致参数的丢失问......
  • Java登陆第三十五天——VUE初始页面解析
    Vite创建的默认Vue3项目中package.json文件信息如下：{"name":"vmoudle1","private":true,"version":"0.0.0","type":"module","scripts":{"dev":"vite",......
  • Web 页面制作基础——HTML基础
    HTML......
  • Vue中怎么使用router进行页面传参
    在响应式编程中，使用VueRouter传递参数通常涉及到以下几个方面：1.动态路由匹配动态路由匹配允许你根据URL中的参数来渲染不同的组件。这在显示用户信息、博客文章等需要根据ID或其他标识符来区分内容的情况下非常有用。例如，如果你想根据用户ID显示不同的用户信息......
  • 第三章 页面布局 总结
    1、盒子模型    微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXinStyleSheets)是基于CSS拓展的样式语言，用于描述WXMI的组成样式，决定WXMI的组件如何显示。WXSS具有CSS的大部分特性。    在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应......
  • 一键开启 GPU 闲置模式，基于函数计算低成本部署 Google Gemma 模型服务
    作者：王骜本文介绍如何使用函数计算GPU实例闲置模式低成本、快速的部署GoogleGemma模型服务。背景信息Google在2024年02月21日正式推出了自家的首个开源模型族Gemma，并同时上架了四个大型语言模型，提供了2B和7B两种参数规模的版本，每种都包含了预训练版本（base模......
  • 动态缓存单个页面-vue3-实现思路
    状态管理定义-全局状态属性`keepNameArray``noKeepNameArray` （为数组）动态组件缓存设置<keep-alive:include="keepNameArray":exclude="noKeepNameArray"><component:is="Component"/></keep-alive>该文件获取keepNameArray和noKeepNameA......
  • 【Lazy ORM】 小工具 acw 本地客户端 你负责点击页面，他负责输出代码
    介绍wu-smart-acw-client简称acw-client，是一个基于LazyORM定制的客户端代码生成小工具LazyORM小工具acw本地客户端你负责点击页面，他负责输出代码安装<dependency><groupId>top.wu2020</groupId><artifactId>wu-smart-acw-cli......
  • 微信小程序之导出页面为doc文件
    微信小程序：需求将一个类似报表的页面点击下载导出问xxx.doc文件。1.写入文件导出由于微信小程序的限制；将导出的功能放到node服务上。使用fs直接将html文本模板写入doc文件后返回下载地址 //生成下载文件，并返回名称app.post('/getFile',(req,res)=>{constdata......
  • 一键开启 GPU 闲置模式，基于函数计算低成本部署Google Gemma 模型服务
    背景信息Google在2024年02月21日正式推出了自家的首个开源模型族Gemma，并同时上架了四个大型语言模型，提供了2B和7B两种参数规模的版本，每种都包含了预训练版本（base模型）和指令微调版本（chat模型）。根据Google的技术报告，本次开源的Gemma在问题回答、合理性、数学、代码......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99