FLEX

vue中引用swiper轮播插件

杀马特。学长 韩版系。学妹 提交于 2020-12-05 22:08:00
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理。 申明:本文所使用的是vue.2x版本。 通过npm安装插件: npm install swiper --save-dev 在需要 使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: < template > < div class ="swiper-container" > < div class ="swiper-wrapper" > < div class ="swiper-slide" >< img src ="../fixtures/sliders/t1.svg" /></ div > < div class ="swiper-slide" >< img src ="../fixtures/sliders/t2.svg" /></ div > < div class ="swiper-slide" > Slide 3 </ div > </ div > <!-- 如果需要分页器 --> < div class ="swiper-pagination" ></ div > <!-- 如果需要导航按钮 --> <!-- <div class="swiper-button-prev"></div>

微信小程序之组件的集合(五)

我只是一个虾纸丫 提交于 2020-12-05 10:53:00
  这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内容,其实在后端的开发中是很成熟的,所以学起来并不是很难以理解,这也是我们的一个优势吧,毕竟选择后端的同学应该是不错的啊,哈哈哈!这种组件其实是有一个特别的名字的,那就是高阶组件,来,把这个东西尽快学习掌握! 一、新建search组件 首先还是新建search组件的各个文件,这里微信开发者工具的功能很好用,直接就新建一个search目录,然后在目录中新建一个名字为index的component组件,这样就建好了四个与组件相关的文件 二、search组件开发 1、基础的结构搭建 (1)样式文件的代码index.wxml文件 1 < view class ="container" > 2 < view class ="header" > 3 < view class ="search-container" > 4 < image class ="icon" src ="images/search.png" ></ image > 5 < input placeholder-class ="in-bar" placeholder ="书籍名" class ="bar" auto-focus

一个学渣的CTO逆袭之路

故事扮演 提交于 2020-12-04 08:17:13
这个画面,熟悉不? 80、90后的人,相信很多应该看过 当年 新华电脑专修学院的广告吧! 对!我就是因为这则广告,入了计算机的“坑”,并且越陷越深! 当年,我在上初中,看了这则广告,便被被深深地吸引了,是那种全身上下每个细胞都很热血的感觉! 我记得当时中考是在县城,考完试,出了考场,我收到一个某电脑培训机构的传单。这激起我内心对计算机学习的欲望,我便毫不犹豫地报了名,从此,开启了我的计算机之路。下面就我的个人经历,来谈谈我自己的跃迁之路吧! 0 1 启程之初-建立知识体系 回忆起这个阶段,我觉得我走的真是比较顺利,每次在遇到迷茫时刻都遇到了人生导师,给我指明了方向: 初中时代 正如开头所说,我中考结束正式进入培训机构学习,但是我还清晰记得当时那种大屁股电脑,装98系统,刚接触,简直太神奇了! 一进去就看到某位大神,啪啪的打字,速度超快,我顿时就惊呆了。我当时心里想,我也要成为那样的人。 期间学习内容现在看来是非常简单,当时就三个内容,五笔打字,word、excel 基础操作。这个阶段建立起了对计算机基础认知!五笔打字练就了我敲键盘的速度,对后来我写代码影响极大! 高中阶段 培训完正式进入高中学习,高一上半年一直对学习没有很好进入状态,直到上学期结束,我就和我爸说想辍学,去新华学电脑,学编程,我爸气的差点揍我,直到某一天,我家有个亲戚是某学校的校长,来我家跟我爸聊起,有个对口高考(对

linux下如何查询进程资源占用?

假装没事ソ 提交于 2020-12-04 08:02:17
linux下有时需要查询某个文件被哪些进程调用,或者某个进程打开了哪些文件,今天介绍两个命令。 0 1 fuser 可以显示出当前哪个程序在使用某个文件、挂载点、网络端口,并给出程序进程的PID等信息 如图fuser显示使用指定文件或者文件系统的用户、进程号、权限、命令。 权限类型有一下几种: c——代表当前目录 e——将此文件作为程序的可执行对象使用 f——打开的文件,默认不显示 F——打开的文件,用于写操作,默认不显示 r——根目录 m——映射文件或者共享库 s——将此文件作为共享库 fuser命令常用选项: -a 显示所有命令行中指定的文件,默认情况下被访问的文件才会被显示。 -c 和-m一样,用于POSIX兼容。 -k 杀掉访问文件的进程。如果没有指定-signal就会发送SIGKILL信号。 -i 杀掉进程之前询问用户,如果没有-k这个选项会被忽略。 -l 列出所有已知的信号名称。 -m name 指定一个挂载文件系统上的文件或者被挂载的块设备(名称name)。这样所有访问这个文件或者文件系统的进程都会被列出来。如果指定的是一个目录会自动转换成"name/",并使用所有挂载在那个目录下面的文件系统。 -n space 指定一个不同的命名空间(space).这里支持不同的空间文件(文件名,此处默认)、tcp(本地tcp端口)、udp(本地udp端口)。对于端口,

vue 路由嵌套 及 router-view vue-router --》children

十年热恋 提交于 2020-12-04 07:34:45
vue 路由嵌套 vue-router --》children 在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据,之前我都是通过v-show/v-if来实现,但当切换的组件太多时,上述方法显然不太合理,而在实际开发中,当你切换的组件太多时,后端往往会将你切换组件的路由给你,所以在这说一下关于vue-router中children,来解决此问题。   例如:在routerChildren.vue中有两个按钮,点击按钮1跳转的one页面 ,点击按钮2跳转的two页面 ,但是需要保存这两个按钮(如果直接通过this.$router.push(),按钮将会消失,会完全跳转)   1.首先我们需要配置一下路由 ,在router.js中     import RouterChildren from "./views/routerChildren.vue" import RouterChildrenOne from "./views/children/one.vue" import RouterChildrenTwo from "./views/children/two.vue" { path: "/routerChildren", name: "routerChildren", component:

微信小程序项目实战之豆瓣天气

假装没事ソ 提交于 2020-12-01 21:18:29
概述 微信小程序项目实战之豆瓣天气 详细 代码下载: http://www.demodashi.com/demo/10943.html 一、准备工作 1、注册微信小程序 2、在小程序设置中设置request合法域名 3、将项目导入开发工具即可运行 二、程序实现 1、项目代码截图: 2、主要API: //获取电影信息 getMovie: function () { var that = this var url = "https://api.douban.com/v2/movie/in_theaters"; var params = { city : "广州" }; wx.request({ url: url, data: params, header: { "content-type": "json" }, success: function (res) { that.setData({ subjects: res.data.subjects }) }, fail: function (res) { }, complete: function (res) { }, }) }, 3、主页面实现html: <!--index.wxml--> <swiper indicator-dots="true" indicator-active-color="#2AAC5E" indicator

AkShare-股票数据-复权后数据

橙三吉。 提交于 2020-11-29 10:52:19
作者寄语 本策略主要基于 BackTrader 来进行运行,需要了解的小伙伴可以查询相关的文档,该开源项目的文档写的很好,示例和说明丰富。 AkShare 策略示例 股票策略 BackTrader 代码 下载和安装 BackTrader from datetime import datetime import backtrader as bt import matplotlib.pyplot as plt import akshare as ak plt.rcParams[ "font.sans-serif" ] = [ "SimHei" ] plt.rcParams[ "axes.unicode_minus" ] = False stock_hfq_df = ak.stock_zh_a_daily(symbol= "sh600000" , adjust= "hfq" ) # 利用 AkShare 一行获取复权数据 class MyStrategy (bt.Strategy) : """ 主策略程序 """ params = (( "maperiod" , 20 ),) # 全局设定交易策略的参数 def __init__ (self) : """ 初始化函数 """ self.data_close = self.datas[ 0 ].close # 指定价格序列 #

AkShare-股票数据-两市停复牌

百般思念 提交于 2020-11-29 08:36:48
作者寄语 提供一个小接口,提供两市停复牌的数据,方便查询。 AkShare-更新记录 "stock_em_tfp" # 两市停复牌数据 股票 两市停复牌 接口: stock_em_tfp 目标地址: http://data.eastmoney.com/tfpxx/ 描述: 获取东方财富网-数据中心-特色数据-两市停复牌 限量: 单次获取指定交易日的停复牌数据 输入参数 名称 类型 必选 描述 trade_date str Y trade_date="2020-03-25" 输出参数 名称 类型 默认显示 描述 代码 str Y 名称 float Y 停牌时间 float Y 停牌截止时间 float Y 停牌期限 float Y 停牌原因 float Y 所属市场 float Y 预计复牌时间 float Y 接口示例 import akshare as ak stock_em_tfp_df = ak.stock_em_tfp(trade_date="2020-03-25") print(stock_em_tfp_df) 数据示例 代码 名称 停牌时间 ... 停牌原因 所属市场 预计复牌时间 0 600766 园城黄金 2020-03-11 09:30 ... 拟筹划重大资产重组 沪市A股 2020-03-25 1 200505 京粮B 2020-03-25 09:30 ...

那些年,面试官问到的面试题总结

人走茶凉 提交于 2020-11-28 13:56:24
1、HTML 语义化的理解 html语义化的含义:根据内容的结构化,选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 语义化的原因:在我的理解当中是: 为了在没有CSS情况下,页面也能呈现出很好的内容结构、代码结构。 用户体验:例如title、alt用于解释名词或者解释图片信息、label标签dd的活用。 有利于SEO(网络引擎搜索优化):和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息 方便其它设备解析 便于团队开发和维护 HTML5新增了哪些语义化标签 头部:<header></header> 尾部:<footer></footer> 独立结构:<article></article> 主要内容:<main></main> 导航:<nav></nav> 侧边栏:<aside></aside> 节、段、分组:<section></section> 表单新增语义化标签: input类型 描述 autofocus 页面加载时自动获取焦点 – – required 规定输入域不能为空 – – placeholder 提供一种提示(hint),输入域为空时显示,获得焦点时消失 pattern 规定验证input域的模式(正则表达式) – – height、width 仅适用于image类型的input标签的图像高度和宽度 3、H5的新特性

CSS3新特性(transform),过渡动画,动画,弹性布局,响应式

半世苍凉 提交于 2020-11-28 04:03:14
1.CSS3新特性 1)转换 [1]2D转换 二维平面移动 语法: transform:translateX(移动的距离 ) translateY( 移动的距离 ); Transform:translate(水平移动距离,垂直移动距离 ) 可以设置负值,水平的正值是向右移动,垂直的正值是向下移动 二维平面旋转 语法: Transform:rotate(30deg); 旋转原点的设置 transform-origin:center(默认值 ) 可以设置left,top,right,bottom,center, 百分比设置:transform-origin:水平位置的百分比 垂直位置的百分比 [2]3D转换 透视点 在所看元素的父元素或者是祖先元素上设置透视点 语法:perspective: 1000px; 三维立体的移动 语法: transform: translateZ(200px); transform: translate3d(水平移动 , 垂直移动 ,z 轴移动 ); z轴: z 轴垂直于屏幕,方向是射向我们。 三维立体的旋转 语法: /*transform: rotateX(30deg);*/ /*transform: rotateY(30deg);*/ /*transform: rotateZ(30deg);*/ transform: rotate3d(1,1,1