Vant组件当中van-list的使用在自定义列表当中
起因 vant官网没有提及自定义列表当中的使用,并且只有一些简单的例子,这里记录下我使用vant-list的记录代码 需求和使用 需求 下拉滚动加载,当快要触底的时候,加载下一页数据(这里不考虑上拉刷新和搜索列表数据) 使用 给vant-list设置一个固定或者自适应flex:1的高度,并设置overflow:scroll即可正常使用 演示地址和git地址 演示:https://codesandbox.io/p/github/superBiuBiuMan/vant_list_study/main?file=%2FREADME.md git:https://github.com/superBiuBiuMan/vant_list_study 演示图
pinia的基本创建和统一创建和解构失去响应式解决办法等知识点
在线代码演示 https://stackblitz.com/github/superBiuBiuMan/pinia_registerWay 使用注意点不能直接结构赋值 如果直接结构赋值,就像下面一样,就会失去响应式效果(数据变了,视图依旧不会更新) 12345<template> {{ name }}</template>const { name } = useCounterStore(); 如果确实需要解构赋值,可以使用storeToRefs https://pinia.vuejs.org/zh/core-concepts/index.html#using-the-store 1234567891011121314151617181920// 官网示例代码import { storeToRefs } from 'pinia'export default defineComponent({ setup() { const ...
微信小程序模块化、组件传值、添加data,menthods类型等-持续更新
组件模块化基本概括 模块化一般分为二种，页面和模块。页面由模块构成。 我们拆分模块化可能是这样子的 modules（页面模块) pageA A1模块 A2模块 pageB B1模块 B2模块 pages(页面) pageA pageB 在小程序当中 我们使用Page注册小程序中的一个页面@官方文档-page说明 使用Component创建自定义组件@官方文档-Component说明 注意下,通过Component创建的组件里面的样式,只会应用于当前组件,比如组件A内部设置了类A,那么在外部即使设置了同样的类名,也不会被应用相同的类名 所以我们创建页面使用Page，创建模块使用Component 模块化后需要注意的点(官方API拷贝过来的) 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。 出于性能考虑，使用 u ...
无js实现拖拽边框改变div大小的笔记
前言 最近刷抖音看到一款游戏”拣爱”,看到这个人手动拖动的很有意思,就想着能不能前端实现,来学习学习,虽然说最终的效果没有gif图片那么好,但是也算实现了,,,,吧…. 具体原理 利用resize属性所出现的小拖拽条 再配合::-webkit-scrollbar设置拖拽区域宽度,高度,结合opacity:0即可将可拖拽区域覆盖整个div 具体效果和代码效果 在线演示 https://codepen.io/superbiubiuman/pen/oNMQxKz 图 代码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889<!DOCTYPE html><html lang="en"><head> <meta charset ...
vue3获取ref实例结合ts的InstanceType
前言 有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过defineExpose暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~ 1234567891011<!-- MyModal.vue --><script setup lang="ts">import { ref } from 'vue'const sayHello = () => (console.log('我会说hello'))defineExpose({ sayHello})</script> 然后我们在父级使用,输入完成MyModalRef.value会发现没有sayHello这个函数提示,所以这个时候我们就需要使用InstanceType 工具类型来获取其实例类型 12345678910<!-- App.vue --><script setup lang="ts">import MyModal ...
React的学习笔记-(Bilibili李立超)
写法的变更之前 12const divNode = <div>你好,React</div>ReactDOM.render(divNode,document.getElementById('root')) 会警告 现在 12345<script type="text/babel"> const divNode = <div>你好,React</div> const root = ReactDOM.createRoot(document.getElementById('root')) root.render(divNode)</script> 同时,不支持渲染对象 12345678const array = ['动感超人','西瓜超人'];//支持 const listObj = [ {name:'李白',sex:'男'} ...
grid布局的学习
前置 只是个人学习,内容只会记录自己想知道,有问题的知识点 具体可以看看bilibili的@耕耕技术宅-grid布局地址 视频对应的@耕耕技术宅-grid布局ppt地址 学有余力的可以通关下这个小游戏@通过给萝卜浇水，学习 CSS 网格布局 @CSS Grid 网格布局教程- 阮一峰 明确基本概念 下图的基本概念先看看,这个必须要先了解 容器和项目 在grid布局和flex布局身上,都有针对容器和项目的属性,在使用的时候需要注意这些属性是设置在哪里的 容器身上的属性 grid-template-columns grid-template-rows grid ow-gap grid-column-gap grid-gap (3和4的简写) grid-template-areas grid-auto-flow justify-items align-items place-items(8和9的简写) justify-content align-content place-content(11和12的简写) grid-auto-columns grid-auto-rows grid ...
flex1和auto区别-好记性不如烂笔头
好记性不如烂笔头 区别 完全等分布局使用flex:1 根据内容宽度动态分配宽度使用flex:auto 示例 当flex:1时候的样子 当flex:auto时候的样子 12345678910111213141516171819202122232425262728293031<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex:1和flex:auto</title> <style> .content{ font-size: ...
React的学习笔记-(Bilibili天禹老师)
React的特点 采用组件化模式,声明式编码,提高开发效率和组件复用率 在React Native中可以使用React语法进行移动端开发(IOS和Android) 使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互 babel用处 es6 => es5 jsx => js 1.你好,react 注意引入顺序 123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1 ...
git merge origin master和git merge master的区别(个人理解)
先说结论git merge origin master 意思是当前的分支,进行合并,合并二个分支分别是远程分支master在本地的副本和本地分支的master git merge master 当前分支于本地所处的master分支进行合并 还有就是 git merge origin master是把origin merge 到 master 上的说法是错误的!!!!!!!!!!!!! git merge实践出真理(放弃,待填坑)准备工作 建立二个分支 stream分支 stream-qiuye分支 三个分支分别在文件添加内容,并提交到远程(图片下面这行字忽略) 分支切换到main分支 前置需要了解origin 并不是指得是远程的仓库，而是指得是远程仓库在本地的一个指针（这个指针有可能过时的）。当我们使用使用merge 的时候，我们进行合并的时候只是上一次fetch 从远程拿到的版本。不是远程仓库的最新版本 在另外一个人向main分支推送了新内容,本地没有更新,并且本地所处main分支情况下进行下面二个操作(为保证效果,) get merge ori ...
