6月
27
首页就按照原网站的图弄弄。图片资源从以往的库中复制过来。
<template>
<NuxtLayout name="base">
<div class="container flex">
<div class="md:w-1/3 flex flex-col">
<span class="text-black text-xl font-semibold mt-16">约拍宝</span>
<a class="text-blue-500 text-sm mt-3" href="https://www.yuepaibao.com" target="_blank">官方网站</a>
<p class="text-gray-600 text-sm mt-3">约拍宝是一款专业摄影类平台,主要服务于爱拍摄的人群。用户可以在平台上进行交互约定支付等来促成合作，还可以发布作品供其他用户欣赏、评论等。</p>
<div class="mt-5">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_miniapp.jpg" alt="约拍宝小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_iosapp.jpg" alt="约拍宝 ios app" />
</div>
<div class="mt-1">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_baidu.png" alt="百度小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_douyin.png" alt="抖音小程序" />
</div>
</div>
<div class="md:w-2/3 p-10 flex">
<img class="w-full object-contain max-w-3xl" src="../assets/image/home/ypb.jpg" />
</div>
</div>
</NuxtLayout>
</template>
效果是这样子的。
继续阅读
6月
26
有追求，自然会把尽力把每一个地方做到最好。有这样一个场景，中间实体内容很少。这个时候不做特殊处理，如果是正常排版下来，底下会出现很大空白。这样就不好看。既然知道了，那就想办法去解决掉。
先截图看看我说的这个场景。底部我还没完善哈。但是底部下边一大片空白。这样体验就不好了。只是一般网页的内容都会比较多，会把底部堆下去。总不能保证每个页面都能堆下去。
继续阅读
6月
25
安装好了 tailwindcss 以及相关的插件后。也安装一下 vscode 对应的插件。常规网站，顶部，底部一般都是公用的，我们可以提取出来，作为 layout。然后是自适应问题，tailwindcss 已居右自适应的特性。我们再扩展一下啊，支持得更宽一点。现在电脑，分辨率也都已经很高了。支持的多一点，体验也会好一些。然后正如 bootstrap 框架一样。container 容器，我们还是要用的。tailwindcss 默认的 container 是不居中的，我们可以在插件中配置一下。默认就居住。其实居中和 bootstrap 一样，都是使用 margin:auto 来搞定的。
那么开始吧。
配置断点和容器
编辑 tailwind.config, 先扩充宽度。也可以更多点。
…
theme: {
extend: {},
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1782px',
}
},
然后设置容器，让其默认就居中。相同的位置，增加 container 配置。其中，center 为 true 时，container 容器默认就居中，这个和 bootstrap 一样了。然后 padding 设置的是每个节点下的内边距。
…
theme: {
extend: {},
container: {
center: true,
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
'3xl': '6rem',
},
},
…
继续阅读
6月
22
还是以 vue 项目为例，去配置和使用 tailwindcss
官网 https://tailwindcss.com/docs/installation/using-postcss
安装 vue 项目
安装 vue 项目
# 创建
pnpm create vue
# 选择配置，尽量选 TypeScript、Router、Pinia、ESLint、Prettier 这些。你做一个大的项目，这些都是必须的
我们把 package.json 中的 type 设置成 module。遵循使用 es 模块规范。
{
…,
"type": "module"
}
然后运行起来看看。
继续阅读
6月
21
初始化项目后，我们需要对项目进行一些配置，以及安装一些插件
修改 node 的规范模式
先修改 node 的规范模式。默认是 commonjs，我们把它改成 es Module 模式。
修改package.json 文件中的 type 属性（没有就加一个。
{
…,
"type": "module"
}
在 commonjs 规范中，导入使用 require。es Module 中，则使用 import 。这是大家最直接基本的映象。当然还有很多的细节问题，可以另外查阅。
最基本的结构
新建 layouts 文件夹，创建 base.vue 文件，填入以下代码。
<template>
<div class="content">
<slot></slot>
</div>
</template>
继续阅读
6月
21
在正式开发之前，我们先了解下 nuxt 的一些基础理论知识。
文件构成
.
├── README.md
├── app.vue # nuxt 应用程序主组件（入口组件）
├── nuxt.config.ts # nuxt 配置文件（该文件配置可覆盖默认的配置-一方面可以覆盖，一方面扩展）
├── package.json # 项目包配置文件
├── pnpm-lock.yaml # pnpm 版本锁定控制文件
├── public
│ └── favicon.ico
├── server
│ └── tsconfig.json
└── tsconfig.json # ts 配置文件
上边这些，只是使用工具创建的默认文件。一个完整的项目，远远不止这些文件夹、文件、配置。 可见官方文档。
https://nuxt.com/docs/guide/directory-structure/nuxt
我们先了解几个比较用的到的。
继续阅读
6月
21
如果做官网、h5这些。 ssr 还是得要考虑的。好吧 vue3 + nuxt3 是一个选择。当然，还有辅助的一些工具和框架。比如 tailwindcss 这些。
vue 官网： https://cn.vuejs.org/guide/essentials/application.html
nuxt 官网： https://nuxt.com/docs/getting-started/installation
在使用 nuxt 之前，您应该已经会使用 vue3 了哈。
一般，都会选择最新，最流行的工具和框架。比如，使用 vite 代替 webpack，使用 pnpm 代替 yarn，npm 这些。如果是 mac 使用 item2 代替默认的终端。这个是跟风，也是学习的动力。有新鲜感和不一样的体验感。
下边这个是我使用 laravel10( blade) + bootstrap5 实现的一个自适应官网。这次，就做一个类似的网站。主要有顶部导航栏、中间实体部分、以及底部信息栏构成。这个是一个实践，做一个完整的这样的页面加一个跳转也面就够了。基础做好了，就是添砖加瓦的事情。
继续阅读
6月
20
6月
16
swiper 组件，通常会用来做轮播图使用。而它的动作表现形式，不仅仅可以做轮播图。比如多个长列表的横向切换。可是，swiper 自身不支持动态高度的。也就是它的高度是默认的，开始指定好的。当然，你也可以使用 js 去动态效果。一般，用 css 能搞定的，就不要去麻烦 js。还有，如果涉及到长列表，就要处理滚动问题以及动态加载问题。该怎么做呢。
尝试
- 组件自身有
onReachBottom 函数。当页面滑动底部会触发。如果不是最外层页面而是内部的滚动是不会触发的。比如可以将 swiper-item 的 overflow 样式值改为 auto, 也是可以滚动的。只是这样一来触发不了 onReachBottom 函数，就没办法去动态加载了。这个时候，我们可以通过加载完数据后，ui 更新后，计算当前 swiper-item 的高度，然后给 swipe 动态设置高度实现。
# swiper 的 current
const tabIndex = ref(0);
# swiper 的高度
const swiperHeight = ref(300);
const calcSwiperHeight = function() {
nextTick(() => {
uni.createSelectorQuery().select(`#list${tabIndex.value}`).fields({size:true}, function(res){
swiperHeight.value = res.height;
}).exec();
})
}
这种方式可以去试试，我没完全体验测试完毕。
- 使用
scroll-view 组件和 swiper 组件来嵌套使用。这样，就不需要动态的去计算 swiper 组件的高度了，而且 scroll-view 有 scrolltolower 函数，解决了动态加载的问题。记得将 scroll-view 放在 swiper-item 内。
这里将 swiper 和 scroll-view 的高度固定。比如 height: calc(100vh - 200rpx);。具体多少，自己把控。
效果动图如下。上边是封装的 tabMenu 组件配合 swiper 一起，双向使用。当然你也可以不要 tabMenu。第一页，我特意设置单次请求数目（也就是 limit）为 5，并且重复拼凑了一些数据。因为总共只有 6 条数据，不足以拉到底部刷新。第二页，我将单次请求数目设置为 20 。第三页是没数据。看请求次数，切换了很多次，只请求了 4 次。这样实现，对页面请求次数也有好处。
布局还可以进一步优化。自定义导航栏，设置 navigationStyle 为 customer, 用 tabMenu 去补充这个位置。这样视觉上可能会更好一点，有用空间也会更大。不过呀，抖音小程序自定义导航栏的要求不好实现。百度小程序和微信小程序都没问题。
自定义导航栏后的效果。
