2019年11月_gyuei

原创 wx:for循环相关页面布局

效果图如下：wxml部分代码如下：<view class="content_order" wx:for="{{advanceOrder}}" wx:key="{{index}}"> <block> <view class="orderTitle"> <text class="businessNum">交易号:{{item....

2019-11-30 17:08:00 576

原创 tab切换嵌套tab切换(多级tab切换)的实现

效果图如下：xml部分代码如下：<view class="paytabs"> <view class="paytabs-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一级标题1</view> <vi...

2019-11-29 11:53:14 3067

原创页面配置

"navigationBarTitleText": "1111",可以单独定义某个页面的顶部栏标题，将其单独写在当前页面json文件中enablePullDownRefresh指是否开启当前页面下拉刷新，值为true/falsenavigationBarTitleText指导航栏标题文字内容navigationBarBackgroundColor指导航栏背景颜色，如 #000000navi...

2019-11-28 14:08:28 303

原创关于position的属性

position 属性规定元素的定位类型/*position的值有下列几种类型*/position: fixed;position:absolute;position:relative;position: static;注意：position: fixed;绝对定位，始终相对于浏览器进行定位position:relative;相对定位，始终相对于浏览器进行定位position:...

2019-11-28 11:32:46 147

原创单选按钮radio嵌套radio(多层radio)

当点击出口按钮时，显示另外一组单选按钮；点击进口按钮时，另外一组单选按钮隐藏最终效果如下：html部分代码如下：<div class="group_rows"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padleft padingtop" > <span clas...

2019-11-27 14:46:07 1427

原创 Vue单选按钮radio输入绑定

html部分代码如下：<div style="display: inline-block;"> <input type="radio" id="tradein" value="radioin" v-model="pickedradio" /> <labe...

2019-11-27 13:34:17 2262

原创 Bootstrap模态框嵌模态框(多层模态框)的实现

以下实例用于创建多层模态框的嵌套效果:1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download)2.在页面内head标签内引入样式库bootstrap.min.css3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js，例如：<head> <meta ...

2019-11-27 11:05:03 1737

原创 Vscode相关插件及设置

Path Intellisense 自动补全路径Beautify 可以快速格式化你的代码格式ESLint 一个语法规则和代码风格的检查工具，可以用来保证代码语法正确、风格统一Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分CSS Peek 可以追踪至样式表中 CSS 类和 ids 定义的地方Color Info 在颜色上悬停光标，就可以预览色块中色彩模型In...

2019-11-26 16:23:51 251

原创 flex.js

//designWidth:设计稿的实际宽度值，需要根据实际设置//maxWidth:制作稿的最大宽度值，需要根据实际设置//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750);(function(designWidth, maxWidth) { var doc = document, win =...

2019-11-26 14:59:59 343

原创 JS中的双击事件

目的：双击某按钮，显示某部分内容html部分代码如下所示：<button class="btn btn-default" id="box" >登录</button><div class="modal"></div>js部分代码如下所示：<script src="//libs.baidu.com/jquery/1.10.2/jqu...

2019-11-26 14:15:33 521 1

原创 Vue中的双击事件 @dblclick=" " v-on:dblclick=" "

目的：双击按钮显示相应内容@dblclick=“事件名”html部分代码如下所示：<button class="btn btn-default" data-toggle="modal" @dblclick="copyText()">登录</button><div id="modalget"></div>js部分代码如下所示：d...

2019-11-26 14:10:27 16494

原创状态按钮自定义

效果入下图所示：html部分代码如下所示：<div class="foot_butslayout"> <div class="state"> <button class="state_btn"> <div class="state_word">11111</div> ...

2019-11-25 16:51:18 181

原创小程序之自定义checkbox样式

效果图如下所示：html部分代码如下：<label class="checkbox checkwords" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</label>css部分代码如下：/*check...

2019-11-25 12:23:23 2957 1

原创 Bootstrap模态框的关闭

目的：点击取消按钮时关闭模态框代码如下：<button type="submit" >发送</button><button type="button" data-dismiss="modal">取消</button>给button按钮加data-dismiss="modal"后，点击取消按钮可以关闭模态框...

2019-11-23 11:13:32 1635

原创 form表单中的name值

<input type=" " name="" value="">一般情况下的input标签需要写name值，这样可以在输入内容时显示历史输入记录。注意：当type类型为text时，name值不一致，当type类型为radio时，name值必须一致，当type类型为chenckbox时，name值可以一致也可以不一致，当type类型为password时，name值必填...

2019-11-23 10:25:00 1258

原创自定义radio单选按钮的默认样式

效果图如下：html代码如下所示：<input type="radio" name="paymeradio" value="" />css代码如下所示： input[type="radio"] { appearance: none; -webkit-appearance: none; outline: none; margin: 0; vertical-ali...

2019-11-22 18:45:53 341

原创去除checkbox的默认样式

效果图如下：<input class="choose" type="checkbox">给复选框checkbox加样式：/*设置复选框的样式*/input[type=checkbox]{ width: 23px; height: 23px; border-radius: 50%; background-color:none; border: 1px solid #...

2019-11-21 15:35:29 4006

原创自定义滚动条niceScroll应用实例

html部分代码如下：<div class="box" style="overflow:auto;height:150px;"> <ul> <li></li> </ul></div>css相关样式的设置：<script src =“ jquery.nicescroll.js”> </ ...

2019-11-16 11:51:21 168

原创 Vue自定义滚动条niceScroll

参考网址：https://nicescroll.areaaperta.com/https://github.com/inuyaksa/jquery.nicescroll/blob/master/README.mdhtml部分代码如下：<div class="box" style="overflow:auto;height:150px;"> <ul> &lt...

2019-11-16 11:06:43 703

原创 Vue无限滚动加载(数据懒加载)

参考网站：https://element.eleme.cn/#/zh-CN/component/infiniteScroll?tdsourcetag=s_pcqq_aiomsg要实现滚动加载的列表上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。<template> <div class="infinite-list-wr...

2019-11-16 10:29:06 8635 1

原创点击编辑按钮，编辑按钮下方的文本框变为可编辑

当页面中存在多个编辑按钮与文本框时：点击当前编辑按扭对应的文本框变为可编辑状态，且当前点击的编辑按钮变为保存按钮html部分代码如下：<button class="edit_border">编辑</button><textarea class="edit_contain" placeholder="请输入内容" value="" disabled="disab...

2019-11-14 16:52:36 3781

原创 Vue图片预览功能的实现

参考网址：https://mirari.cc/v-viewer/目的：写一个关于图片预览的组件window+R找到项目所在的文件夹----输入npm install v-viewer + 回车在components文件夹下建一个XXX.vue的文件，文件内代码如下：<template> <div class="hello"> <viewer :...

2019-11-14 13:51:38 1105

原创去除textarea标签的默认样式

去除文本域的默认样式textarea{ border:none; outline: none; resize: none; background:red;}outline: none;轮廓线不显示resize: none;禁止拉伸若设计稿中文本域有固定宽度，可以设置width和height属性，单位为px最终效果如图：...

2019-11-14 13:37:43 5018

原创运行Vue项目

window+r打开控制台，输入cmd------点击确定切换至目标磁盘(c:+回车即切换至c盘，d:+回车即切换至d盘)安装依赖：cd XXX(项目文件夹的名称)----敲回车—切换到XXX文件夹npm install----敲回车启动项目:npm run server...

2019-11-13 14:37:02 124

原创利用Vue实现分页组件

效果：参考文章：https://www.cnblogs.com/sebastian-tyd/p/7853109.html功能描述：1、单击页码跳转到相应的页面2、可以在输入框中输入想要到达的页面3、单击上一页和下一页按钮，可以实现前进和后退功能4、当处于第一页时，不显示上一页按钮；当处于最后一页时不显示下一页按钮；html部分代码如下所示：<div id="app">...

2019-11-09 17:25:41 178

原创 Vue实现tab标题切换实例

本文主要讲述利用Vue实现简单的tab切换效果，有需要的朋友可以参考html部分布局html部分代码如下所示：<div id="app"> <ul class="tab-tilte"> <li>标题一</li> <li>标题二</li> <li>标题...

2019-11-09 11:44:24 720

原创 Bootstrap模态框modal的实现

以下实例创建模态框效果:1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download)2.在页面内head标签内引入样式库bootstrap.min.css3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js，例如：<head> <meta chars...

2019-11-07 10:13:19 308

原创 tab切换效果的实现

效果如图所示：1. 利用css实现Tab切换效果html部分代码如下：<form action="" method="post" class="box"> <input type="radio" name="zz" id="one" checked=""> <label for="one">红楼梦</label> <div&...

2019-11-04 16:32:30 918

gyueh的博客