首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Taro小程序自定义顶部导航栏功能的实现

Posted in Javascript onDecember 17, 2020

微信自带的顶部导航栏是无法支持自定义icon和增加元素的，在开发小程序的时候自带的根本满足不了需求，分享一个封装好的组件，支持自定义icon、扩展dom，适配安卓、ios、h5，全面屏。
我用的是京东的Taro多端编译框架写的小程序，原生的也可以适用，用到的微信/taro的api做调整就行，实现效果如下。

Taro小程序自定义顶部导航栏功能的实现
Taro小程序自定义顶部导航栏功能的实现

1、NavBar.js

import Taro from '@tarojs/taro';
import React, { Component } from 'react'
import { View } from '@tarojs/components';
import { isFunction } from '../../utils/index' //判断是否为函数，可以用loadsh的_isFunction,也可以自己封装。
import './NavBar.less';


function getSystemInfo () {
 if (Taro.globalSystemInfo && !Taro.globalSystemInfo.ios) {
  return Taro.globalSystemInfo;
 } else {
  // h5环境下忽略navbar
  if (!isFunction(Taro.getSystemInfoSync)) {
   return null;
  }
  let systemInfo = Taro.getSystemInfoSync() || {
   model: '',
   system: ''
  };
  let ios = !!(systemInfo.system.toLowerCase().search('ios') + 1);
  let rect;
  try {
   rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;
   if (rect === null) {
    throw 'getMenuButtonBoundingClientRect error';
   }
   //取值为0的情况 有可能width不为0 top为0的情况
   if (!rect.width || !rect.top || !rect.left || !rect.height) {
    throw 'getMenuButtonBoundingClientRect error';
   }
  } catch (error) {
   let gap; //胶囊按钮上下间距 使导航内容居中
   let width = 96; //胶囊的宽度
   if (systemInfo.platform === 'android') {
    gap = 8;
    width = 96;
   } else if (systemInfo.platform === 'devtools') {
    if (ios) {
     gap = 5.5; //开发工具中ios手机
    } else {
     gap = 7.5; //开发工具中android和其他手机
    }
   } else {
    gap = 4;
    width = 88;
   }
   if (!systemInfo.statusBarHeight) {
    //开启wifi的情况下修复statusBarHeight值获取不到
    systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
   }
   rect = {
    //获取不到胶囊信息就自定义重置一个
    bottom: systemInfo.statusBarHeight + gap + 32,
    height: 32,
    left: systemInfo.windowWidth - width - 10,
    right: systemInfo.windowWidth - 10,
    top: systemInfo.statusBarHeight + gap,
    width: width
   };
   console.log('error', error);
   console.log('rect', rect);
  }

  let navBarHeight = '';
  if (!systemInfo.statusBarHeight) {
   //开启wifi和打电话下
   systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
   navBarHeight = (function () {
    let gap = rect.top - systemInfo.statusBarHeight;
    return 2 * gap + rect.height;
   })();

   systemInfo.statusBarHeight = 0;
   systemInfo.navBarExtendHeight = 0; //下方扩展4像素高度 防止下方边距太小
  } else {
   navBarHeight = (function () {
    let gap = rect.top - systemInfo.statusBarHeight;
    return systemInfo.statusBarHeight + 2 * gap + rect.height;
   })();
   if (ios) {
    systemInfo.navBarExtendHeight = 4; //下方扩展4像素高度 防止下方边距太小
   } else {
    systemInfo.navBarExtendHeight = 0;
   }
  }

  systemInfo.navBarHeight = navBarHeight; //导航栏高度不包括statusBarHeight
  systemInfo.capsulePosition = rect; //右上角胶囊按钮信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前发现在大多机型都是固定值 为防止不一样所以会使用动态值来计算nav元素大小
  systemInfo.ios = ios; //是否ios
  Taro.globalSystemInfo = systemInfo; //将信息保存到全局变量中,后边再用就不用重新异步获取了
  //console.log('systemInfo', systemInfo);
  return systemInfo;
 }
}
let globalSystemInfo = getSystemInfo();
class NavBar extends Component {
 constructor(props) {
  super(props);
  this.state = {
   configStyle: this.setStyle(globalSystemInfo)
  };
 }
 static options = {
  multipleSlots: true,
  addGlobalClass: true
 };

 UNSAFE_componentWillMount () {
  //获取高度
  // let query = Taro.createSelectorQuery().in(this.$scope)
  // query.select('.lxy-nav-bar').boundingClientRect(rect=>{
  //  const navHeight = rect.height
  //  this.props.personalHomeMod.changeState('navHeight',navHeight)
  // 	// console.log('navHeight',toJS(this.props.personalHomeMod.state))
  // }).exec()
 }
 componentDidShow () {
  if (globalSystemInfo.ios) {
   globalSystemInfo = getSystemInfo();
   this.setState({
    configStyle: this.setStyle(globalSystemInfo)
   });
  }
 }
 handleBackClick () {
  if (isFunction(this.props.onBack)) {
   this.props.onBack();
  } else {
   const pages = Taro.getCurrentPages();
   if (pages.length >= 2) {
    Taro.navigateBack({
     delta: this.props.delta
    });
   }
  }
 }
 handleGoHomeClick () {
  if (isFunction(this.props.onHome)) {
   this.props.onHome();
  }
 }
 handleSearchClick () {
  if (isFunction(this.props.onSearch)) {
   this.props.onSearch();
  }
 }
 static defaultProps = {
  extClass: '',
  background: 'rgba(255,255,255,1)', //导航栏背景
  color: '#000000',
  title: '',
  searchText: '点我搜索',
  searchBar: false,
  back: false,
  home: false,
  iconTheme: 'black',
  delta: 1
 };

 setStyle (systemInfo) {
  const { statusBarHeight, navBarHeight, capsulePosition, navBarExtendHeight, ios, windowWidth } = systemInfo;
  const { back, home, title, color } = this.props;
  let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
  let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距

  let navigationbarinnerStyle = [
   `color:${color}`,
   //`background:${background}`,
   `height:${navBarHeight + navBarExtendHeight}px`,
   `padding-top:${statusBarHeight}px`,
   `padding-right:${leftWidth}px`,
   `padding-bottom:${navBarExtendHeight}px`
  ].join(';');
  let navBarLeft;
  if ((back && !home) || (!back && home)) {
   navBarLeft = [
    `width:${capsulePosition.width}px`,
    `height:${capsulePosition.height}px`,
    `margin-left:0px`,
    `margin-right:${rightDistance}px`
   ].join(';');
  } else if ((back && home) || title) {
   navBarLeft = [
    `width:${capsulePosition.width}px`,
    `height:${capsulePosition.height}px`,
    `margin-left:${rightDistance}px`
   ].join(';');
  } else {
   navBarLeft = [`width:auto`, `margin-left:0px`].join(';');
  }
  return {
   navigationbarinnerStyle,
   navBarLeft,
   navBarHeight,
   capsulePosition,
   navBarExtendHeight,
   ios,
   rightDistance
  };
 }

 render () {
  const {
   navigationbarinnerStyle,
   navBarLeft,
   navBarHeight,
   capsulePosition,
   navBarExtendHeight,
   ios,
   rightDistance
  } = this.state.configStyle;
  const {
   title,
   background,
   backgroundColorTop,
   back,
   home,
   searchBar,
   searchText,
   iconTheme,
   extClass
  } = this.props;
  let nav_bar__center;
  if (title) {
   nav_bar__center = <text>{title}</text>;
  } else if (searchBar) {
   nav_bar__center = (
    <View
     className='lxy-nav-bar-search'
     style={`height:${capsulePosition.height}px;`}
     onClick={this.handleSearchClick.bind(this)}
    >
     <View className='lxy-nav-bar-search__icon' />
     <View className='lxy-nav-bar-search__input'>{searchText}</View>
    </View>
   );
  } else {
   /* eslint-disable */
   nav_bar__center = this.props.renderCenter;
   /* eslint-enable */
  }
  return (
   <View
    className={`lxy-nav-bar ${ios ? 'ios' : 'android'} ${extClass}`}
    style={`background: ${backgroundColorTop ? backgroundColorTop : background};height:${navBarHeight +
     navBarExtendHeight}px;`}
   >
    <View
     className={`lxy-nav-bar__placeholder ${ios ? 'ios' : 'android'}`}
     style={`padding-top: ${navBarHeight + navBarExtendHeight}px;`}
    />
    <View
     className={`lxy-nav-bar__inner ${ios ? 'ios' : 'android'}`}
     style={`background:${background};${navigationbarinnerStyle};`}
    >
     <View className='lxy-nav-bar__left' style={navBarLeft}>
      {back && !home && (
       <View
        onClick={this.handleBackClick.bind(this)}
        className={`lxy-nav-bar__button lxy-nav-bar__btn_goback ${iconTheme}`}
       />
      )}
      {!back && home && (
       <View
        onClick={this.handleGoHomeClick.bind(this)}
        className={`lxy-nav-bar__button lxy-nav-bar__btn_gohome ${iconTheme}`}
       />
      )}
      {back && home && (
       <View className={`lxy-nav-bar__buttons ${ios ? 'ios' : 'android'}`}>
        <View
         onClick={this.handleBackClick.bind(this)}
         className={`lxy-nav-bar__button lxy-nav-bar__btn_goback ${iconTheme}`}
        />
        <View
         onClick={this.handleGoHomeClick.bind(this)}
         className={`lxy-nav-bar__button lxy-nav-bar__btn_gohome ${iconTheme}}`}
        />
       </View>
      )}
      {!back && !home && this.props.renderLeft}
     </View>
     <View className='lxy-nav-bar__center' style={`padding-left: ${rightDistance}px`}>
      {nav_bar__center}
     </View>
     <View className='lxy-nav-bar__right' style={`margin-right: ${rightDistance}px`}>
      {this.props.renderRight}
     </View>
    </View>
   </View>
  );
 }
}

export default NavBar;

2、NavBar.less

view,
text,
scroll-view,
input,
button,
image,
cover-view {
 box-sizing: border-box;
}
page {
 /* prettier-ignore */
 --height: 44PX; /* 4*2+32 */
 /* prettier-ignore */
 --right: 97PX; /* 10+87 */
 /* prettier-ignore */
 --navBarExtendHeight: 4PX;
 /* prettier-ignore */
 --navBarHeight: 68PX;
 box-sizing: border-box;
}
.lxy-nav-bar .ios {
 /* prettier-ignore */
 --height: 44PX; /* 4*2+32 */
 /* prettier-ignore */
 --right: 97PX; /* 10+87 */
 /* prettier-ignore */
 --navBarExtendHeight: 4PX;
 box-sizing: border-box;
}
.lxy-nav-bar .android {
 /* prettier-ignore */
 --height: 48PX; /* 8*2+32 */
 /* prettier-ignore */
 --right: 96PX; /* 10+87 */
 /* prettier-ignore */
 --navBarExtendHeight: 4PX;
 box-sizing: border-box;
}
.lxy-nav-bar .devtools {
 /* prettier-ignore */
 --height: 42PX; /* 5*2+32 */
 /* prettier-ignore */
 --right: 88PX; /* 10+87 */
 /* prettier-ignore */
 --navBarExtendHeight: 4PX;
 box-sizing: border-box;
}
.lxy-nav-bar__inner {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 5001;
 /* prettier-ignore */
 height: var(--navBarHeight);
 display: flex;
 align-items: center;
 padding-right: var(--right);
 width: 100%;
 /* prettier-ignore */
 padding-top: 20PX;
 /* prettier-ignore */
 padding-bottom:4PX;
 .placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 }
}
.lxy-nav-bar__inner .lxy-nav-bar__left {
 position: relative;
 width: var(--right);
 /* prettier-ignore */
 height: 32PX;
 /* padding-left: 10PX; */
 /* prettier-ignore */
 margin-left:10PX;
 display: flex;
 align-items: center;
}
.lxy-nav-bar__buttons {
 height: 100%;
 width: 100%;
 display: flex;
 align-items: center;
 /* prettier-ignore */
 border-radius: 16PX;
 border: 1px solid rgba(204, 204, 204, 0.6);
 position: relative;
}
.lxy-nav-bar__buttons.android {
 border: 1px solid rgba(234, 234, 234, 0.6);
}
.lxy-nav-bar__buttons::after {
 position: absolute;
 content: '';
 width: 1px;
 /* prettier-ignore */
 height: 18.4PX;
 background: rgba(204, 204, 204, 0.6);
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}
.lxy-nav-bar__buttons.android::after {
 background: rgba(234, 234, 234, 0.6);
}
.lxy-nav-bar__button {
 width: 50%;
 height: 100%;
 display: flex;
 /* prettier-ignore */
 font-size: 12PX;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 1em 2em;
}

.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback:active,
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome:active {
 opacity: 0.5;
}
.lxy-nav-bar__inner .lxy-nav-bar__center {
 /* prettier-ignore */
 font-size: 17PX;
 /* prettier-ignore */
 line-height: 17PX;
 text-align: center;
 position: relative;
 flex: 1;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 align-items: center;
 justify-content: center;
 /* prettier-ignore */
 padding-left: 10PX;
 text {
  margin-top: -2px;
  font-size:34px;
  font-weight:550;
  line-height:44px;
 }
}
.lxy-nav-bar__inner .lxy-nav-bar__loading {
 font-size: 0;
}
.lxy-nav-bar__inner .lxy-nav-bar__loading .lxy-loading {
 margin-left: 0;
}
.lxy-nav-bar__inner .lxy-nav-bar__right {
 /* prettier-ignore */
 margin-right: 10PX;
}
.lxy-nav-bar__placeholder {
 height: var(--navBarHeight);
 background: #f8f8f8;
 position: relative;
 z-index: 50;
 visibility: hidden;
}

.lxy-nav-bar-search {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 /* prettier-ignore */
 height: 32PX;
 /* prettier-ignore */
 border-radius: 16PX;
 position: relative;
 background: #f6f6f6;
}

.lxy-nav-bar-search__input {
 height: 100%;
 display: flex;
 align-items: center;
 color: #999;
 /* prettier-ignore */
 font-size: 15PX;
 /* prettier-ignore */
 line-height: 15PX;
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback.white {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome {
 background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M537.13744054-106.18008097999996c-12.56871953-12.56871953-31.42179957-12.56871953-50.27488108 0L28.10427953 195.46919964000006c-12.56871953 12.56871953-18.85308003 25.13744054-18.85308003 37.70616005l0 609.58292171c0 25.13744054 18.85308003 43.99052059 43.9905191 43.9905191l301.6492806 0c18.85308004 0 31.42179957-12.56871953 31.42180105-31.42179957l0-314.21800013c0-18.85308004 12.56871953-31.42179957 31.42179956-31.42180105l188.53080038 0c18.85308004 0 31.42179957 12.56871953 31.42179956 31.42180105l0 314.21800013c0 18.85308004 12.56871953 31.42179957 31.42180105 31.42179957L970.7582814 886.7488005c25.13744054 0 43.99052059-18.85308003 43.9905191-43.9905191L1014.7488005 233.17535969000005c0-12.56871953-6.2843605-25.13744054-18.85308003-37.70616005l-458.75827993-301.64928062z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
 /* prettier-ignore */
 background-size: 17PX 34PX;
 margin-top: 10px;
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome.white {
 background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M537.13744054-106.18008097999996c-12.56871953-12.56871953-31.42179957-12.56871953-50.27488108 0L28.10427953 195.46919964000006c-12.56871953 12.56871953-18.85308003 25.13744054-18.85308003 37.70616005l0 609.58292171c0 25.13744054 18.85308003 43.99052059 43.9905191 43.9905191l301.6492806 0c18.85308004 0 31.42179957-12.56871953 31.42180105-31.42179957l0-314.21800013c0-18.85308004 12.56871953-31.42179957 31.42179956-31.42180105l188.53080038 0c18.85308004 0 31.42179957 12.56871953 31.42179956 31.42180105l0 314.21800013c0 18.85308004 12.56871953 31.42179957 31.42180105 31.42179957L970.7582814 886.7488005c25.13744054 0 43.99052059-18.85308003 43.9905191-43.9905191L1014.7488005 233.17535969000005c0-12.56871953-6.2843605-25.13744054-18.85308003-37.70616005l-458.75827993-301.64928062z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
 /* prettier-ignore */
 background-size: 17PX 34PX;
 margin-top: 10px;
}
.lxy-nav-bar-search__icon {
 /* prettier-ignore */
 width: 22PX;
 /* prettier-ignore */
 height: 22PX;
 display: flex;
 align-items: center;
 justify-content: center;
 background-image: url("data:image/svg+xml,%3Csvg t='1565691512239' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1240' width='48' height='48'%3E%3Cpath d='M819.2 798.254545L674.909091 653.963636c46.545455-48.872727 74.472727-114.036364 74.472727-186.181818 0-151.272727-123.345455-274.618182-274.618182-274.618182-151.272727 0-274.618182 123.345455-274.618181 274.618182 0 151.272727 123.345455 274.618182 274.618181 274.618182 65.163636 0 128-23.272727 174.545455-62.836364l144.290909 144.290909c2.327273 2.327273 6.981818 4.654545 11.636364 4.654546s9.309091-2.327273 11.636363-4.654546c6.981818-6.981818 6.981818-18.618182 2.327273-25.6zM235.054545 467.781818c0-132.654545 107.054545-239.709091 239.709091-239.709091 132.654545 0 239.709091 107.054545 239.709091 239.709091 0 132.654545-107.054545 239.709091-239.709091 239.709091-132.654545 0-239.709091-107.054545-239.709091-239.709091z' fill='%23999999' p-id='1241'%3E%3C/path%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-size: cover;
}
input{
  padding:0 20px !important;
  text-align: start !important;
}

属性：

Taro小程序自定义顶部导航栏功能的实现

slot:

Taro小程序自定义顶部导航栏功能的实现

到此这篇关于Taro小程序自定义顶部导航栏的文章就介绍到这了,更多相关小程序自定义导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

Taro小程序自定义顶部导航栏功能的实现

- Author -

带风的少年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
找到一点可怜的关于dojo资料，谢谢作者！
Dec 06 Javascript
关于图片验证码设计的思考
Jan 29 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
js回到页面指定位置的三种方式
Dec 17 #Javascript
javascript 数组(list)添加/删除的实现
Dec 17 #Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 #Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 #Javascript
原生JS实现拖拽功能
Dec 16 #Javascript
Spring Data JPA(4) FTP(9) Android(19) 池化技术(1) 域控制器(1) Repository接口(3) systemctl(1) DHCP(2) 线程池(1) Ubuntu Server(6)
You might like
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
浅谈php和.net的区别
2014/09/28 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
php微信公众号开发（4）php实现自定义关键字回复
2016/12/15 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python celery原理及运行流程解析
2020/06/13 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
英国最受欢迎的平价女士时装零售商：Roman Originals
2019/11/02 全球购物
八年级美术教学反思
2014/02/02 职场文书
环保倡议书500字
2014/05/15 职场文书
刑事起诉书范文
2015/05/19 职场文书
教师教育心得体会
2016/01/19 职场文书