weixin_36724538的博客

原创 PC端网站 rem适配方案

以1920设计稿为准1、使用sass语法 转换px rem ， vscode编辑器安装插件easy-scss安装之后打开插件setting.json， 在setting.json里配置转换后css的路径 “easysass.targetDir”: “./css”创建css文件、scss文件：项目中如何使用index.scss文件：$yellow: yellow;$theme: blue;$orange: orange;$red: red;// PX 转 rem@function p

原创 swiper 左边箭头和内容间距过大

解决方式

原创 pc端网页适配方式 sass+Autoprefixer+media

1、自动加前缀vscode编辑，扩展-下载插件Autoprefixer，配置如下setting.json添加如下：“autoprefixer.options”: { "browsers": [ "ie >= 6", "firefox >= 8", "chrome >= 24", "Opera >= 10", "last 2 versions", "> 5%" ]

原创 vue中安装px2rem 像素转rem单位

1、npm install --save lib-flexible在main.js中 ：import ‘lib-flexible/flexible’2、 npm install --save px2rem-loader在build/util.js中添加px2remLoader配置const px2remLoader = {loader: ‘px2rem-loader’,options: {remUnit: 75 //这个是重点，设计稿是750px}}const loaders = [

原创 小程序 自定义tabbar

父页面wxmljson“usingComponents”: {“TabBar”: “/components/TabBar/TabBar”},jsPage({data: {msg: ‘’,loading: false,count: 0,},checkTab() {this.triggerEvent(‘goTo’, app.globalData.tabId)}}子页面wxml{{item.name}}wxss.footer-tab{width: 100%

原创 vue 安装postcss-pxtorem插件报错：[object Object] is not a PostCSS plugin。

.postcssrc.js文件配置module.exports = {“plugins”: {“postcss-import”: {},“postcss-url”: {},“autoprefixer”: {browsers: [‘Android >= 4.0’, ‘iOS >= 7’]},‘postcss-pxtorem’: {rootValue: 37.5,　　//结果为：设计稿元素尺寸/37.5，比如元素宽375px,最终页面会换算成 10rempropList: [’*

原创 TypeError: this.getOptions is not a function 引入less一直报错

卸载less-loader重新安装低版本less-loader

原创 echarts pie饼图  series 修改label标签颜色

echarts pie饼图 series 修改label标签颜色效果图：代码：var datas = [ [ { name: '圣彼得堡来客', value: 5.6 }, { name: '陀思妥耶夫斯基全集', value: 1 }, { name: '史记精注全译（全6册）', value: 0.8 }, ]];option = { title: { text: '阅读书籍分布', ...

原创 webstorm 小程序wpy文件高亮显示

1、先下载vue.js2、设置 vue.js template 参数

原创 js日期格式化 YYMMDD 转 YY-MM-DD 转 YY年MM月DD日

js日期格式化YYMMDD hhmmss 转 YY-MM-DD hh:mm:ssYY-MM-DD hh:mm:ss 转 YY年MM月DD日 hh时mm分ss秒

原创 小程序 wepy 多行文本溢出显示省略号

index.scssindex.wpyjs

原创 vue element-ui table @row-click @selection-change 全选功能，编辑、删除当前row

原创 vue、wepy、小程序跳转链接和获取参数的方法

一、vue 跳转链接方式router-link：this.$router.push：this.route.query、this.route.query、this.route.query、this.route.params 获取链接参数二、小程序跳转链接方式三、wepy 跳转链接方式

原创 vue 和 小程序、wepy 条件渲染的写法和区别

vue 和 小程序、wepy 条件渲染的写法和区别vue：v-if=“status” status为true显示；适用于条件-初始化后不改变v-show=“status” status为true显示；适用于频繁切换条件小程序：wx:if="{{status}}" status为true显示；适用于条件-初始化后不改变hidden="{{status}}" status为false显示；适用于频繁切换条件wepy：wepy2.0版本条件渲染：推荐使用 v-show，v-ifv-

原创 jq 中如何调用vue的方法

jq 中如何调用 vue的方法

原创 Vue 编译报错 { parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }.

Vue 引入 less、 less-loader 后，编译报错原因：页面style 的标签的 lang 要设置为 scss (lang = ‘less’ 编译不通过)错误写法：

原创 小程序 wepy 框架安装流程

第一步：安装node.js：https://nodejs.org/zh-cn/ （npm属于node.js 下的包管理 ）安装cnpm淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org（成功后可使用命令行： cnpm install xxx）第二步：安装wepy-cli脚手架cnpm install wepy-cli -g 或者 cnpm install @wepy/cli -g第三步：生成开发实例wep

原创 小程序自定义tabBar组件 父子通信原理

创建一个tabBar文件tabBar.wxmltabBar.wxss.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position

原创 小程序报错 [“tabBar“][“list“][1] 未找到

小程序全局配置tabBar出现一个这样的报错：[“tabBar”][“list”][1] 未找到然后仔细检查代码：“tabBar”: {“color”: “#999”,“selectedColor”: “#333”,“list”: [{“pagePath”: “pages/index/index”,“iconPath”: “resources/icon_home.png”,“selectedIconPath”: “resources/icon_home_selected.png”,“t