uniapp 实现销售订单页面-风格1

最新推荐文章于 2025-06-11 17:44:12 发布

原创

最新推荐文章于 2025-06-11 17:44:12 发布 · 2.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #vue

本文介绍了一个包含搜索功能的前端页面，展示了如何使用U-Search组件进行关键词过滤，并通过API获取销售订单列表，实现分页加载和详细查看。核心内容包括U-Navbar导航、滚动加载、数据处理和路由跳转。

1.效果图片

2.源代码

<template>
	<view class="container">
	   <u-navbar back-text="返回" title-color="#fff" back-icon-color="#ffffff" 
			:is-fixed="true" :is-back="true" 
			:back-text-style="{'color':'#fff'}"
			:background="background"  
			:custom-back="goback">
		    <view class="slot-wrap">
		    	<view class="search-wrap" >
		    		<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
		    		<u-search v-model="selectParams.keyWord" 
					@search="search()"  :placeholder="placeholder" 
					:show-action="false"  height="56" 
					:action-style="{color: '#fff'}"></u-search>
		    	</view>
		    </view>		
		</u-navbar>
	   <scroll-view scroll-y  style="height: 100%;width: 100%;" 
	      @scrolltolower="reachBottom" enable-back-to-top>
		   <!-- 正文内容 -->  
		   <view class="content"> 
		       <view   v-for="(item,index) in dataList" :key="index">
			   <view class="item">
				     <view class="item-top">
				     		<view class="item-top-left">
								{
  
  {msgType}}
							</view>
							<view class="item-top-right">
							   •••
							</view>
				     </view>
					 <vie