vue3+ts+uniapp+unibest 微信小程序（第二篇）—— 图文详解自定义背景图页面布局、普通页面布局、分页表单页面布局

礼貌而已2025-02-28 13:23

文章目录

    • 简介
    • 一、自定义背景图布局
        • [1.1 效果预览](#1.1 效果预览)
        • [1.2 实现思路](#1.2 实现思路)
        • [1.3 custom-page 组件全量代码](#1.3 custom-page 组件全量代码)
        • [1.4 页面使用](#1.4 页面使用)
    • 二、普通页面布局
        • [2.1 效果预览](#2.1 效果预览)
        • [2.2 实现思路](#2.2 实现思路)
        • [2.3 公共样式部分](#2.3 公共样式部分)
        • [2.4 页面使用](#2.4 页面使用)
    • 三、分页表单页面布局
        • [3.1 效果预览](#3.1 效果预览)
        • [3.2 实现思路](#3.2 实现思路)
        • [3.3 页面代码](#3.3 页面代码)

简介

开发工具：VsCode

技术栈：vue3 + Ts + uni-app + unibest + Wot Design Uni

简介：图文结合，十分钟带你搞定微信小程序常见页面布局

一、自定义背景图布局

1.1 效果预览
1.2 实现思路
  • 因为小程序原生顶部导航栏只有白色、黑色两种背景色，所以使用自定义导航栏
  • 提高代码复用率，采用组件封装得形式。代码见 ------》步骤 1.3 custom-page 组件全量代码
  • wot design uni 组件库的 wd-navbar 组件刚好符合需求
  • 关键：wd-navbar 组件有一个属性（placeholder：固定在顶部时，在标签位置生成一个等高的占位元素），解决了顶部高度计算的问题
  • 具体文档所在位置如下图
1.3 custom-page 组件全量代码
ts 复制代码 
<template>
  <view class="h-full w-full bg-[#F5F5F5] custom-page-container">
    <!-- 自定义顶部背景图（可选） -->
    <image src="@/static/images/home/bg.png" class="custom-page-bg" />

    <!-- 页面内容 -->
    <view class="custom-page-main">
      <!-- 自定义顶部--导航栏 -->
      <wd-navbar
        :title="title"
        safeAreaInsetTop
        placeholder
        :left-arrow="showBack"
        @click-left="handleClickLeft"
        custom-class="wd-navbar-custom"
      ></wd-navbar>

      <!-- 页面主体--功能版块 -->
      <view class="custom-page-content">
        <!-- 页面主体内容--插槽 -->
        <view :class="showPagePadding ? 'page-content-p' : ''" class="custom-slot-content">
          <slot name="content"></slot>
        </view>

        <!-- 页面底部按钮--插槽 -->
        <slot name="footer"></slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  // navbar标题
  title: {
    type: String,
    default: '',
    required: true,
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true,
  },
  // 页面主体是否需要展示左右边距
  showPagePadding: {
    type: Boolean,
    default: true,
  },
})
/**
 * 返回上一级
 */
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.custom-page-container {
  position: relative;
  .custom-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 668rpx;
  }

  .custom-page-main {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .custom-page-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      max-height: 100%;
      overflow: hidden;

      .custom-slot-content {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
</style>
1.4 页面使用

二、普通页面布局

2.1 效果预览
2.2 实现思路
  • 整个页面 flex 布局，中间部分 flex：1。
  • 抽离公共布局样式，不采用组件封装方式，减小心智负担
2.3 公共样式部分
js 复制代码 
// /src/style/public.scss
// 公共页面布局样式--简易版
.custom-page-simple {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: $open-bg-grey;

  .page-main {
    flex: 1;
    padding: 28rpx;
    margin: 28rpx;
    overflow: auto;
    background: $open-bg-primary;
    border-radius: $open-border-radius;
  }

  .page-footer {
    width: 100%;
    height: 130rpx;
    padding: 30rpx 28rpx;
    background-color: $open-text-color-inverse;
    box-shadow: 0rpx 0rpx 27.78rpx 0rpx rgba(9, 197, 133, 0.25);
  }
}
2.4 页面使用

三、分页表单页面布局

3.1 效果预览


3.2 实现思路
  • 使用 z-paging 组件
  • z-paging 官方文档：z-paging官方文档
  • 组件安装方式参考官方，没有比这个更清晰的了
3.3 页面代码
bash 复制代码 
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '公告列表',
  },
  custom: true,
}
</route>

<template>
  <z-paging
    ref="pagingRef"
    v-model="noticeList"
    :paging-style="{ backgroundColor: '#fff' }"
    :default-page-size="pageQuery.size"
    @query="queryList"
  >
    <!-- 顶部搜索栏 -->
    <template #top>
      <wd-search
        ref="searchRef"
        v-model="pageQuery.someText"
        placeholder="请输入搜索内容"
        placeholder-left
        hide-cancel
        :maxlength="50"
        @change="handleSearchChangeDebounce"
      />
    </template>
    <!-- 通告列表 -->
    <div class="notice-list">
      <div class="notice-item" v-for="(item, index) in noticeList" :key="index">
        <!-- 标题 -->
        <div class="notice-title">{{ item.title }}</div>
        <!-- 内容 -->
        <span v-if="!item.details || item.details.length < 58" class="notice-content">
          {{ item.details || '--' }}
        </span>
        <wd-collapse
          v-else
          v-model="item.showMoreContent"
          viewmore
          custom-class="notice-content"
          :line-num="2"
        >
          {{ item.details || '--' }}
        </wd-collapse>
        <!-- 发布时间 -->
        <div class="notice-publish-time">
          {{ '发布时间：' + parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}') }}
        </div>

        <!-- 图片、视频列表 -->
        <div class="notice-file flex items-center">
          <div
            class="notice-file-item"
            v-for="(file, fileIndex) in item.pictureUrlList"
            :key="fileIndex"
          >
            <wd-img
              :width="100"
              :height="75"
              :src="file"
              :enable-preview="true"
              mode="aspectFill"
            />
          </div>

          <div
            class="notice-file-item"
            v-for="(file, fileIndex) in item.videoUrlList"
            :key="fileIndex"
          >
            <video :src="file" :id="`video${fileIndex}`" controls></video>
          </div>
        </div>
      </div>
    </div>
  </z-paging>
</template>

<script lang="ts" setup>
import { debounce } from 'lodash-es'
import { useUserStore } from '@/store'
import { fetchNoticePageList } from '@/api/fitness-test/notice'
import { INoticePageQuery, INoticePageResponseListItem } from '@/api/fitness-test/notice/types'
import { parseTime } from '@/utils/business'

const userStore = useUserStore()

// 通知公列表--数据
const noticeList = ref<INoticePageResponseListItem[]>([])

/** ================================ 分页请求 start ================================== */
// z-paging 组件实例
const pagingRef = ref<ZPagingRef>()

// 分页查询参数
const pageQuery = reactive<Omit<INoticePageQuery, 'schoolId'>>({
  current: 1,
  size: 6,
  someText: '',
})

// 搜索框实例
const searchRef = ref()
// 数据总数
const total = ref(0)

// 学校id
const schoolId = computed(() => userStore.getUserInfo.schoolId)

/**
 * 分页查询
 * @param pageNo 当前页
 * @param pageSize 每页条数
 */
function queryList(pageNo: number, pageSize: number) {
  // console.log('queryList', pageNo, pageSize)
  fetchNoticePageList({
    current: pageNo,
    size: pageSize,
    schoolId: schoolId.value,
    someText: pageQuery.someText,
  })
    .then((res) => {
      const { count, data, size, current } = res.data
      // 赋值给total
      total.value = count
      // 赋值给pageQuery.size
      pageQuery.size = size
      // 赋值给pageQuery.current
      pageQuery.current = current
      const resultList = (data || []).map((item) => {
        return {
          ...item,
          showMoreContent: false,
          pictureUrlList: item.pictureUrlList || [],
          videoUrlList: item.videoUrlList || [],
        }
      })
      // 将请求的结果数组传递给z-paging
      // 参考文档：https://z-paging.zxlee.cn/api/methods/main.html#%E6%95%B0%E6%8D%AE%E5%88%B7%E6%96%B0-%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95
      pagingRef.value?.completeByTotal([...resultList], total.value)
    })
    .catch((err) => {
      console.log(err)
      pagingRef.value?.complete(false)
    })
}

// 为提升性能，避免高频触发接口，搜索框改变时触发用 防抖 函数
const handleSearchChangeDebounce = debounce(handleSearchChange, 500)

/**
 * 搜索框改变时触发
 * @param value 搜索框的值
 */
function handleSearchChange(ipt: { value: string }) {
  // console.log('handleSearchChange', ipt)
  // 重新请求
  pagingRef.value?.reload()
}
/** ================================ 分页请求 end ================================== */
</script>
相关推荐
三天不学习1 小时前
使用Cursor + Devbox + Uniapp 一站式AI编程开发移动端（App、H5、小程序）
小程序·uni-app·ai编程
Q_Q5110082855 小时前
python+django/flask+uniapp宠物中心信息管理系统app
spring boot·python·django·flask·uni-app·node.js·php
小刀拉屁股让你开开眼5 小时前
uniapp 腾讯地图服务
uni-app
不爱搬砖的码农6 小时前
使用 vscode 开发 uni-app 项目时如何解决 manifest.json 文件注释报错的问题
vscode·uni-app·json
刘大浪14 小时前
uniapp 小程序 学习（一）
学习·小程序·uni-app
陈龙龙的陈龙龙17 小时前
uniapp 金额处理组件
前端·javascript·uni-app
xw519 小时前
uni-app项目loading显示方案
前端·uni-app
！win ！19 小时前
uni-app项目loading显示方案
前端·uni-app
^Rocky21 小时前
uniapp 实现腾讯云音视频通话功能
uni-app·音视频·腾讯云
炫彩@之星1 天前
微信小程序渗透测试指北（附案例）
微信小程序·小程序
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解05海康Visionmaster-常见问题排查方法-启动阶段06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07零代码入门 | Coze——让大模型接入自己的数据库08从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10DeepSeek各版本说明与优缺点分析