当前位置： 首页 > article >正文

uniapp小程序相关记录

article 2025/1/11 14:49:05

一、自定义搜索组件并调用
1、组件代码

<template>
  <view class="my-search-container" :style="{'background-color': bgcolor}" @click="searchBoxHandler">
    <view class="my-search-box" :style="{'border-radius': radius + 'px'}">
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-search",
    props: {
      // 背景颜色
      bgcolor: {
        type: String,
        default: '#c00000'
      },
      // 圆角尺寸
      radius: {
        type: Number,
        default: 18 //px
      }
    },
    data() {
      return {

      };
    },
    methods: {
      searchBoxHandler() {
        this.$emit('click')
      }
    }
  }
</script>

<style lang="scss">
  .my-search-container {
    height: 50px;
    // background-color: #c00000;
    display: flex;
    align-items: center;
    padding: 0 10px;

    .my-search-box {
      width: 100%;
      height: 36px;
      background-color: #fff;
      // border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;

      .placeholder {
        font-size: 15px;
        margin-left: 5px;
      }
    }
  }
</style>

2、父页面调用

import {mySearch} from '@/components/my-search/my-search.vue'
components:{mySearch},
 <!-- 搜索组件 -->
		<view class="search-box">
		 <my-search @click="gotoSearch"></my-search>
		  <!-- 动态给子组件传颜色和圆角像素值 -->
		  <!-- <my-search @click="gotoSearch" :bgcolor="'black'" :radius="18"></my-search> -->
		</view>


gotoSearch() {
	uni.navigateTo({
		url: '/subpkg/search/search'
	})
},
.search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

二、首页轮播图

<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
		  <swiper-item v-for="(item,i) in swiperList" :key="i">
			<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.good_id">
			  <image :src="item.image_src"></image>
			</navigator>
		  </swiper-item>
		</swiper>


 // 轮播图数据列表
swiperList: [],
swiper {
	    height: 330rpx;
	  },
	.swiper-item,
	image {
	  width: 100%;
	  height: 100%;
	},

三、首页分类导航区域

 <!-- 分类导航区域 -->
		<view class="nav-list">
		  <view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
			<image :src="item.image_src" class="nav-img"></image>
		  </view>
		</view>
navClickHandler(item) {
				if (item.name === '分类') {
				  uni.switchTab({
					url: '/pages/category/category'
				  })
				}
			},
.nav-list {
	    display: flex;
	    justify-content: space-around;
	    margin: 15px 0;
	  }
	.nav-img {
	  width: 128rpx;
	  height: 140rpx;
	}

三、首页代码

<template>
	<view>
		 <!-- 搜索组件 -->
		<view class="search-box">
		 <my-search @click="gotoSearch"></my-search>
		  <!-- 动态给子组件传颜色和圆角像素值 -->
		  <!-- <my-search @click="gotoSearch" :bgcolor="'black'" :radius="18"></my-search> -->
		</view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
		  <swiper-item v-for="(item,i) in swiperList" :key="i">
			<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.good_id">
			  <image :src="item.image_src"></image>
			</navigator>
		  </swiper-item>
		</swiper>
		 <!-- 分类导航区域 -->
		<view class="nav-list">
		  <view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
			<image :src="item.image_src" class="nav-img"></image>
		  </view>
		</view>
		<!-- 楼层区域 -->
		<view class="floor-list">
		  <!-- 每个楼层的 item 项 -->
		  <view class="floor-item" v-for="(item,i) in floorList" :key="i">
			<!-- 楼层的标题 -->
			<image :src="item.floor_title.image_src" class="floor-title"></image>
			<!-- 楼层的图片区域 -->
			<view class="floor-img-box">
			  <!-- 左侧图片 -->
			  <navigator class="left-img-box" :url="item.product_list[0].url">
				<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}"
				  mode="widthFix">
				</image>
			  </navigator>
			  <!-- 右侧图片 -->
			  <view class="right-img-box">
				<navigator class="right-img-item" v-for="(item2,i2) in item.product_list" :key="i2" v-if="i2 !== 0"
				  :url="item2.url">
				  <image :src="item2.image_src" :style="{width: item2.image_width + 'rpx'}" mode="widthFix"></image>
				</navigator>
			  </view>
			</view>
		  </view>
		</view>
		
	</view>
</template>

<script>
	import {mySearch} from '@/components/my-search/my-search.vue'
	export default {
		components:{mySearch},
		data() {
			return {
				title: 'Hello',
				 // 轮播图数据列表
				swiperList: [],
				// 分类导航的数据列表
				navList: [],
				// 楼层的数据
				floorList: []
			}
		},
		onLoad() {
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()
		},
		methods: {
			gotoSearch() {
				uni.navigateTo({
				  url: '/subpkg/search/search'
				})
		    },
		    async getSwiperList() {
			   const {
				 data: res
			   } = await uni.$http.get('/api/public/v1/home/swiperdata')
			   // 请求失败
			   if (res.meta.status !== 200) return uni.$showMsg()
			   // 请求成功
			   this.swiperList = res.message
			 },
			 async getNavList() {
				 const {
				   data: res
				 } = await uni.$http.get('/api/public/v1/home/catitems')
				 // 请求失败
				 if (res.meta.status !== 200) return uni.$showMsg()
				 // 请求成功
				 this.navList = res.message
			},
			navClickHandler(item) {
				if (item.name === '分类') {
				  uni.switchTab({
					url: '/pages/category/category'
				  })
				}
			},
			async getFloorList() {
				const {
				  data: res
				} = await uni.$http.get('/api/public/v1/home/floordata')
				// 请求失败
				if (res.meta.status !== 200) return uni.$showMsg()
				// 请求成功
				// 对每张图片的 navigator_url 数据进行处理
				res.message.forEach(floor => {
				  floor.product_list.forEach(prod => {
					prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
				  })
				})
				this.floorList = res.message
			},
		}
	}
</script>

<style>
	swiper {
	    height: 330rpx;
	  },
	.swiper-item,
	image {
	  width: 100%;
	  height: 100%;
	},
	
	
	.nav-list {
	    display: flex;
	    justify-content: space-around;
	    margin: 15px 0;
	  }
	.nav-img {
	  width: 128rpx;
	  height: 140rpx;
	}
	
	.floor-title {
	    width: 100%;
	    height: 60rpx;
	  }
	
	  .floor-img-box {
	    display: flex;
	    padding-left: 10rpx;
	  }
	
	  .right-img-box {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-around;
	  }
	 
	
 .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }
</style>

四、商城分类页

<template>
	<view>
		<my-search @click="gotoSearch"></my-search>
		
		 <view class="scroll-view-container">
			 <!-- 左侧滑动区域 -->
			<scroll-view scroll-y="true" :style="{height: wh + 'px'}" class="left-scroll-view">
				<block v-for="(item,i) in cateList" :key="i">
				  <view :class="['left-scroll-view-item',i === active ? 'active' : '']" @click="activeChange(i)">
					{{item.cat_name}}
				  </view>
				</block>
			</scroll-view> 
			<!-- 右侧滑动区域 -->
		    <scroll-view scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
				<view class="cate-lv2" v-for="(item2,i2) in cateLevel2" :key="i2">
				  <!-- 二级分类标题 -->
				  <view class="cate-lv2-title">
					/ {{item2.cat_name}} /
				  </view>
				  <!-- 当前二级分类下的三级分类列表 -->
				  <view class="cate-lv3-list">
					<!-- 三级分类的 item 项 -->
					<view class="cate-lv3-item" v-for="(item3,i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
					  <!-- 三级分类的图片 -->
					  <image :src="item3.cat_icon"></image>
					  <!-- 三级分类的文本 -->
					  <text>{{item3.cat_name}}</text>
					</view>
				  </view>
				</view>
		    </scroll-view>
		 </view>
		
	</view>
</template>

<script>
	import {mySearch} from '@/components/my-search/my-search.vue'
	export default {
		components:{mySearch},
		data() {
			return {
				 // 当前设备可用高度
				wh: 0,
				// 分类列表数据
				cateList: [],
				active: 0,
				// 二级分类的列表
				cateLevel2: [],
				scrollTop: 0
			}
		},
		onLoad() {
		  const sysInfo = uni.getSystemInfoSync()
		  this.wh = sysInfo.windowHeight - 50
		  this.getCateList()
		},
		methods: {
		  // 获取分类列表数据
		  async getCateList() {
			const {
			  data: res
			} = await uni.$http.get('/api/public/v1/categories')
			if (res.meta.status !== 200) return uni.$showMsg()
			this.cateList = res.message
			// 为二级列表赋值
			this.cateLevel2 = res.message[0].children
		  },
		  activeChange(i) {
			this.active = i
			// 重新为二级分类赋值
			this.cateLevel2 = this.cateList[i].children
			this.scrollTop = this.scrollTop === 0 ? 1 : 0
		  },
		  // 跳转到商品列表页面
		  gotoGoodsList(item) {
			uni.navigateTo({
			  url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
			})
		  },
		  gotoSearch() {
			uni.navigateTo({
			  url: '/subpkg/search/search'
			})
		  }
		}
	}
</script>

<style lang="scss">
.scroll-view-container {
    display: flex;
    .left-scroll-view {
      width: 120px;
      .left-scroll-view-item {
        background-color: #f7f7f7;
        line-height: 60px;
        text-align: center;
        font-style: 12px;
      }
      & .active {
        background-color: #fff;
        position: relative;
        &::before {
          content: ' ';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
    }
  }
   .cate-lv2 {
      background-color: #fff;
    }
  
    .cate-lv2-title {
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 15px 0;
    }
  
    .cate-lv3-list {
      display: flex;
      flex-wrap: wrap;
  
      .cate-lv3-item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
  
        image {
          width: 60px;
          height: 60px;
        }
  
        text {
          font-style: 12px;
        }
      }
    }
</style>

http://www.kler.cn/a/136529.html

相关文章：

  • STM32F4分别驱动SN65HVD230和TJA1050进行CAN通信
  • PostgreSQL 18新特性之uuidv7函数
  • Angular生命周期
  • 新版2024AndroidStudio项目目录结构拆分
  • HTML5 动画效果：淡入淡出（Fade In/Out）详解
  • Mysql 性能优化：索引条件下推(ICP)
  • React Native项目接入Sentry指南
  • 键盘映射笔记
  • 智能合约检测：新一代区块链技术的安全守护
  • NX二次开发UF_CAM_ask_lower_limit_plane_usage 函数介绍
  • 光谱图像超分辨率综述
  • Linux常用命令——builtin命令
  • 电容搞搞”振“，PDN有帮衬
  • html实现图片裁剪处理(附源码)
  • Unity模拟薄膜干涉效果
  • 手撕单链表（C语言）
  • 【数据结构】【版本2.0】【树形深渊】——二叉树入侵
  • 万字解析设计模式之 适配器模式
  • 深度学习系列54：使用 MMDETECTION 和 LABEL-STUDIO 进行半自动化目标检测标注
  • vscode工作区多Tabs
  • 代码随想录算法训练营第四十五天| 139.单词拆分
  • 模具制造厂ERP都有哪些牌子?模具制造厂ERP有什么用
  • jenkins传参给robotframework
  • lenovo联想笔记本ThinkPad P1 Gen5/X1 Extreme Gen5原装出厂Windows11预装OEM系统
  • 机器学习-笔记
  • linux备份系统盘