我有神奇组件模板
神奇大叔
这个作者很懒,什么都没留下…
展开
-
边框带有三角指向的矩形框
基本思路:div设置高宽为0,此时四边边框全为三角形,然后设置上左右边框色透明,设置该div背景色作为边框然后设置div的伪类,设置相同,定位后需要向下移动1px以及向左移动边框长度,使得上方设置的背景色作为边框,让伪类的背景色和矩形框相同即可效果图:代码示例:html: <div className='jf-list-tip-container'> <div className='jf-list-tip'> <原创 2020-11-23 19:47:51 · 290 阅读 · 0 评论 -
移动端轮播图(自动循环轮播、无缝衔接、短距离回弹、图片可拖动、拖动结束播放)
本案例轮播的图片为4个第四张 第一张 第二章 第三张 第四张 第一张index从1开始,通过index来使得装图片的容器,left=-(index-1)*屏幕宽度+'px'通过定时器开启轮播1、自动循环轮播和无缝衔接: (1)在四个图片前添四个图片的最后一张,四个图片的尾添加图片的第一张 使得轮播时,最后一张图片能自然切换到第一张 (2)无缝衔接(当原最后一张图片轮播到原首张时从首战开始轮播) 当原最后一张图片轮播到原首张时,关掉过渡动画,位移到原首张的距离2、短距离回弹原创 2020-10-12 20:20:46 · 2073 阅读 · 0 评论 -
taro实现小程序端瀑布流
微信小程序暂时未发现如何获取dom,但能获取节点的信息taro端可通过ref获取到节点,但无法通过节点获取节点的相关信息效果图:代码示例:import Taro from '@tarojs/taro'import {View,Text,Image} from '@tarojs/components'import React,{Component} from 'react'import './index.less'/** * https://ss2.bdstatic.com/70cF原创 2020-09-28 22:29:06 · 2451 阅读 · 2 评论 -
可拖拽播放、可点击播放的音乐播放器(Vue)
<template> <div class='pro' @mouseup="mouseup" @mousemove="mousemove"> <div class='p-b'> <div> <a-icon type="step-backward" /> </div> <div v-if='pause' @click="play" class原创 2020-09-17 20:39:39 · 657 阅读 · 0 评论 -
模态框实现点击展开,点击空白关闭效果(React Native)
思路: 模态框分为上下两部分,上部分放数据,下部分设置填充满且空白 设置模态框背景为透明,动画类型为none,模态框外部设置事件打开模态框 模态框内部空白区域通过TouchableWithoutFeedback包裹,设置事件关闭模态框效果图:代码示例:import React,{Component} from 'react'import { View, Text, StyleSheet, Modal, Button, Alert, TouchableOpacit原创 2020-09-02 15:04:57 · 1886 阅读 · 0 评论 -
自定义顶部三格状态栏(React Native)
使用方法: 给组件传入三个对应方法,方法返回react元素 leftItem:PropTypes.func, middleItem:PropTypes.func, rightItem:PropTypes.funcimport React,{Component} from 'react'import PropTypes from 'prop-types'import { View, Text, StyleSheet, Dimensions,原创 2020-08-31 15:35:13 · 261 阅读 · 0 评论 -
ReactNative 上拉加载和下拉刷新模板
import React,{Component} from 'react'import { View, Text, Image, StyleSheet, FlatList, ActivityIndicator} from 'react-native'class Movie extends Component{ state={ arr:[ 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoW原创 2020-08-30 15:44:27 · 408 阅读 · 0 评论 -
可滑动带进度条、进度条边界回弹恢复效果的宫格展示面板(Vue)
效果图:继续让进度条向左:进度条向右恢复:思路:(1)进度条宽度:进度条背景长度*(屏幕宽度/滚动区域),获取对应比例的进度条宽度(2)进度条移动随滚动区域移动:根据移动距离占滚动区域的总长度的比例和进度条移动距离占总进度条的背景长度相同,换算进度条移动距离 1、触摸开始获取起始点 2、触摸过程获取点和起始点计算,获取滚动距离,进行换算 3、触摸结束获取结束时在触摸过程中的换算后的移动距离,放在2中,用于在上一次滑动结束后的位置继续滑动 结束触摸后,还要判断进度条宽度,进行宽度恢原创 2020-08-14 10:13:03 · 841 阅读 · 0 评论 -
侧边栏组件(Vue)
从右侧滑入使用方法: 外部传入draw的键,且键值为true开启 外部监听@changeShow事件,通过将传入的draw值改为false关闭代码示例:侧边栏<template> <transition name='move'> <div class='draw' v-show='draw'> <button @click="goEdit">返回</button> </div&g原创 2020-08-08 17:19:40 · 1999 阅读 · 0 评论 -
自定义插件,封装Toast组件(Vue)
使用方法 在main.js通过Vue.use安装后,在其他组件内部,this.$toast.show(弹出内容,消失事件毫秒)使用代码实例:main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App原创 2020-08-03 16:14:10 · 332 阅读 · 0 评论 -
解决better-scroll和keep-alive使用产生的无法保持之前滑动位置bug
解决思路 (1)使用当有keep-alive的两个生命周期函数,activated和deactivated (2)当离开页面时,记录最后的滑动位置 (3)当进入页面时,滑动到记录的滑动位置并刷新scroll来重新计算一下滑动位置代码示例: activated() { // activated时,dom还未加载完成 if(this.$refs.scrolls.scroll!=null) { //通过ref获取到滑动组件内部的属性和方法 this.$refs原创 2020-07-31 15:28:47 · 788 阅读 · 0 评论 -
better-scroll封装具有上拉加载、下拉刷新等组件(Vue)
使用方法: 使用: 将要滑动的内容放进组件标签内,作为插槽 下拉刷新、上拉加载 在该组件标签上自定义@loadRefresh='x',@loadMore='x'函数,作为下拉刷新、上拉加载回调函数 回到顶部 自定义临界值 具体配置看代码注释代码示例:<template> <div class='scroll'> <div class='scroll-cont'> <slot x='jeff'&g原创 2020-07-30 17:31:26 · 391 阅读 · 0 评论 -
自定义tabs切换显示不同内容(Vue)
使用方法: (1)传入内容为标题的数组 (2)向外传递了一个currentIndex的方法,参数就是当前选中标题的索引 根据索引展示不同内容代码示例:<template> <div class='tab'> <div class='tab-tit'> <span v-for='(item,index) in title' :key='index' :class='currentIndex === index?"on":原创 2020-07-30 11:03:38 · 1539 阅读 · 0 评论 -
自定义tabs切换显示不同内容(React)
做法: (1)将要显示的内容作为插槽传入组件 (2)使用React.Children.map遍历插槽内容的标签属性获取标题栏内容 xx.props.键名 (3)使用React.Children.map遍历插槽内容获取要显示的元素 xx.props.children标题栏选中高亮 自定义当前索引,设置点击事件,当当前索引等于元素索引时,添加相应类名 选中标题栏显示对应内容 在标题栏点击事件中,当当前索引等于元素索引时,添加相应类名代码示例:组件:import React,原创 2020-07-15 16:28:25 · 1891 阅读 · 0 评论 -
上拉加载组件
做法: (1)在组件挂载后,绑定滑动事件,使用ref获取到该组件对象 (2)组件对象调用getBoundingClientRect()获取到该组件距离页面顶部的距离(不包括元素自身) (3)通过判断该组件距离页面顶部的距离和页面本身的高度,如果小于页面本身的高度,则发生网络请求获取更多数据节流防抖: 在定时器中设置网络请求,下一次触发时,清除掉上一次的定时器,保留当前的定时器,若在 定时器设置的延迟时间内再次触发,会被清除掉,只保留当前最新的网络请求参数传递 该组件仅有提示信息,需要的网原创 2020-07-14 23:09:01 · 443 阅读 · 0 评论 -
能够回车触发和获取内容的搜索组件
import React from "react"import "./style.less"export default class SearchInput extends React.Component { constructor(props){ super(props); this.state = { values:"" } } getValuesHandler(event){原创 2020-07-14 09:32:40 · 166 阅读 · 0 评论 -
列表滑动对应分类列表也变化(如微信联系人、商家餐品列表)
思路:要想左侧分类对应的标题样式和右侧内容滑动到标题对应内容时选中这里采用better-scroll来实现滚动在数据更新后,界面更新时($nextTick) 1、通过ref获取右侧每个列表块的高度(每个li) 2、实时获取当前滚动条的y坐标 3、利用计算属性(数据变化就会执行)返回当前y坐标应该对应的index 如li高度为100,200,300,当y为220时,应返回坐标1 4、将index和左侧列表的index对比选中样式代码示例:<template> //左侧分原创 2020-05-29 23:14:04 · 445 阅读 · 0 评论