- 博客(41)
- 收藏
- 关注
RSS订阅原创 始终让div位于当前页面的中间
<image src="路径" style="width: 50%;height: 170px;position:fixed;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);"></image>//left:50%;top:50%;让图片左上角处在屏幕中间。transform:translateX(-5.
2021-09-29 10:43:35
216
原创 vue整个页面的背影颜色设置
beforeCreate() { document .querySelector("body") .setAttribute("style", "background-color:rgb(242,242,242)"); //document.querySelector('body').setAttribute('style', 'background-color:#FFFFFF!important'); }
2021-07-01 11:42:00
496
原创 vue公众号微信支付实现代码
话不多说直接上代码样式代码 <div style="position: fixed;bottom:0;color:white;font-size:0.3rem;width:105%;height:1rem;text-align:center;line-height:1rem;background:red;margin-left:-2.5%;" @click="GroupDetails_path_go" > 微信支付￥{{ shopInfoRe
2021-07-01 11:41:05
247
原创 vue根据接口修改背景图片
话不多说直接上代码通过backgroundImage根据接口的路径展示:style="{backgroundImage:'url('+this.List.oilCarLogoImageUrl+')',backgroundSize:'100%'}"这里注意backgroundImage使用的是驼峰命名，不是background-image
2021-05-26 16:19:43
618
原创 vue手写多选（获取选中的值）
话不多说，直接上代码先展示样式 <li v-show="isShow_clear" style=" display: flex; margin-top: 10px; background: rgba(204, 2
2021-04-02 13:12:17
1552
2
原创 vue获取select下option的值
话不多说上代码 <el-select v-model="value" clearable placeholder="站长" @focus='ChoseTypess_focus_one' @change="ChoseTypess_change_one($event)"> <el-option v-for="item in types" :key="item" :label="item" :value="item"> &l
2021-03-25 15:59:16
241
原创 修改elementui默认样式，比如折叠版
话不多说直接上代码先给父级加类 <el-collapse @change="handleChange" style="width:100%;font-size:45px" class="el-collapse-item__Bos"> </el-collapse>然后使用父级类名加>>> 深入符号直接强制更改.el-collapse-item__Bos >>>.el-collapse-item__header{ font-size:
2021-03-23 16:41:32
556
2
原创 vue使用echarts创建中国地图（详细步骤）
效果图 这是官网的地图 :官网地址首先我们需要安装echartsnpm install echarts --save这里需要注意的是，现在echarts升级到5了，有些新特性，这里我们安装4.9的npm install echarts @4.9.0然后在main.js中引入import echarts from 'echarts'Vue.prototype.$echarts = echarts//这两步很重要，没有的话地图不出来,这是全局引
2021-03-10 17:28:13
1036
原创 小程序js双重循环进行显隐判断
话不多说，直接上代码//res.data.data是右侧数据 res.data.data.forEach(item=>{ item.isShow = true; //shoplist是购物车数据 this.data.shoplist.forEach(item_=>{ if(item.id == item_.goodsId){ item.isShow = false;
2021-03-05 09:21:14
289
1
原创 获取到res.data.data下的数组里的数组
话不多说上代码 // // 遍历数组获取里面的商品内容添加 let list = []; this.data.orderfrom_list.map(element=>{ let orderItems=[] let obj = {}; obj.id = element.id; obj.storeName = element
2021-03-01 16:03:57
2819
原创 小程序跳转传递多个参数
直接上代码(传一个数组加一个参数) wx.navigateTo({ url: '/pages/oderform/oderform?orderItem='+JSON.stringify(this.data.shoplist)+'&number='+1, })通过&衔接
2021-02-26 09:16:38
138
原创 小程序循环双重数组渲染
话不多说直接上代码 <view wx:for="{{order_Item}}" wx:key='*this'> <view wx:for="{{item}}" wx:for-item="item" wx:key='*this'> {{item} </view> </view>
2021-02-26 09:14:19
375
原创 获取不到res.data下的data解决方法
其实很简单，只需要： // 转为JSON格式 let JSONresult=JSON.parse(res.data) console.log(JSONresult.data)这样就可以了
2021-02-23 14:09:41
4044
原创 小程序请求头的使用
我们一般在封装网络模块和请求数据时用到请求头，根据不同的数据使用不同的请求头一般我们使用 header: { 'Content-Type': 'application/x-www-form-urlencoded' }当数据为json，传递数据 header:{'content-type':'application/json;charset=utf-8'}有什么不对的还请大神指点。...
2021-02-22 10:35:34
245
原创 小程序选择收货地址navigateBack跳转返回上一页面传递参数，数据更新
话不多说直接上代码，代码里有注释 // 点击地址选中地址返回上一个页面 seleect_site(e){ console.log(e) let item=encodeURIComponent(JSON.stringify(e.currentTarget.dataset.item)) var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面 // 调用上一个页面对
2021-02-05 14:57:04
482
原创 wx:if判断数组中是否有值
话不多说，直接上代码 <view wx:if="{{list.length == 0}}"></view>这是当数组长度为0时显示；反之不等于0 <view wx:if="{{list.length ！= 0}}"></view>
2021-02-02 11:52:52
1557
原创 vue的post以及get多个参数传参
首先是post let data = { //要传的值 }; this.$http.post("后缀", data).then(res => { console.log(res) });然后是get this.$http.post("后缀?uid="+this.uid+'&'+'shopId='+this.shopId).then(res => { console.log(res) });...
2021-02-01 15:37:29
4357
原创 小程序点击跳转外部链接
首先给一个按钮一个点击事件 <view style="width:30%;text-align:center" bindtap="click_jd"></view>然后在app.json里配置路由“pages/jd/jd”然后给点击事件click_jd(){wx.navigateTo({url:'/pages/jd/jd'})}然后在jd.wxml里配置<web-view src="https://www.baidu.com"></we
2021-01-29 15:07:15
630
原创 微信小程序websocket的使用
直接上代码<button bindtap='found'>创建连接</button><button bindtap='send'>发送内容</button><button bindtap='shut'>关闭连接</button>//创建连接found: function () { //本地测试使用 ws协议 ,正式上线使用 wss 协议 var url = 'ws://这是后端给你的路径以及拼接的内容'; cod
2021-01-22 09:49:40
312
原创 小程序下拉刷新
首先定义一个数组来接受数据:data:{//接受数组Preferential_list:[]}然后找到onReachBottom页面上拉触底事件的处理函数 onReachBottom: function (e) { console.log(e) //声明全局 var that=this; //每触底一下页数+1 that.setData({ pageNum:that.data.pageNum+1 }) let obj={
2021-01-14 13:29:19
142
原创 微信小程序刷新页面购物车数据消失解决方法
首先通过接口在onload里获取到购物车数据渲染出来然后将购物车数据保存到本地 wx.setStorageSync('cart', res.data.data[0].orderItemList)然后在onShow里再拿出来 * 生命周期函数--监听页面显示 */ onShow: function () { var shoplist=wx.getStorageSync('cart') this.setData({ shoplist:shoplist }) this.
2021-01-06 16:05:48
1309
原创 小程序获取购物车所有商品id，console.log出来是undefined时的解决办法
首先声明一个数组let goodsIdlist=[]然后我们需要通过jQuery在js页面进行遍历并添加进去 shoplist.map(element=>{ goodsIdlist.push(element.goodsId) }) this.setData({ goodsIdlist:goodsIdlist })然后通过join分割 console.log(goodsIdlist.join(","))然后就可以拿到字符串的商品i
2021-01-06 14:17:38
491
原创 微信小程序Dialog的使用
首先我们在json里引入 "van-dialog": "@vant/weapp/dialog/index"然后在js里引入(放在在Page上面)（这里需要写自己的路径）import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';然后再onload或者方法里写入 Dialog.confirm({ title: '取消订单', message: '确定取消订单吗？', })
2021-01-05 16:38:07
1207
原创 vue项目的网络模块封装
首先在src下创建一个network文件夹，在文件夹里创建三个js文件，分别是：config.js,core.js,index.jsconfig.jsvar config ={ logon:'login',}export default configcore.js import res from './index.js' import config from './config' var fire={ login(params={}){
2021-01-04 10:14:34
187
原创 vue踩坑（在刚创建好项目时遇到的）: ✖ 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable
<template> <div> 1 </div></template><script>export default {}</script><style></style>只需要在这个vue最后一行敲入一行空格就可以了
2021-01-04 09:43:24
2378
原创 NavMenu 导航菜单
首先引入element相关代码 <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> &l
2020-12-29 16:40:47
531
原创 vant小程序框架购物车SubmitBar背景颜色改变
首先引入SubmitBar"usingComponents": { "van-submit-bar": "@vant/weapp/submit-bar/index"}然后在wxml里写入<van-submit-bar price="{{ pri }}" button-text="提交订单" bind:submit="onSubmit" class="refer" //给它一个class tip="{{ true }}"></v
2020-12-17 16:34:00
1260
原创 App以及微信小程序一行超过文本宽度用省略号代替
Appcss代码 width: 100%; /*一定要设置宽度，或者元素内含的百分比*/ overflow:hidden; /*溢出的部分隐藏*/ white-space: nowrap; /*文本不换行*/ text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/微信小程序wxss代码width: 40%;overflow: hidden;text-overflow: ellip
2020-12-16 17:24:18
247
原创 element树形列表同时选中子父节点以及回显的实现
首先调用element里的tree树形控件: <el-tree :data="dataTree" ref="tree" :props="props" accordion show-checkbox node-key="id" updateKeyChi
2020-12-15 16:43:12
637
原创 小程序跳转时传数组(另一个页面接收数组)
**这里注意一下：**需要在点击时传入数组.wxml页面 <view style="color:#999999;font-size:25rpx" bindtap="more_click" data-item="{{shoplist}}">更多好货限时抢></view>.js页面more_click(e){ console.log(e) var model = JSON.stringify(e.currentTarget.dataset.item);
2020-12-04 17:56:08
2422
1
原创 小程序角标的添加以及绑定购物车数量进行实时更新
首先介绍一下角标的方法： // tabBer角标 index代表的是第几个tabber text表示角标内容 wx.setTabBarBadge({ index: 2, text: '1' }) } { wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的标志 index: 2, })
2020-12-04 17:49:49
1468
原创 小程序登陆授权(获取用户手机号以及信息)
话不多说直接上代码.js代码首先let app =getApp() data: { userInfo: null, // 遮罩层 show:false }, processLogin(){ this.setData({ show: true }); }, getPhoneNumber(options) { console.log(options) console.log(options.detail.errMsg) con
2020-12-02 16:30:33
1430
原创 小程序Vant引入
第一步在资源管理器里打开文件，输入cmd，在小黑框里输入 npm init （一路回车）第二步输入指令: npm i @vant/weapp -S --production第三步 点击
2020-12-02 09:05:39
124
1
原创 小程序view的背景图片
小程序的背景图片通过给view添加class，运用backgroundimage:url(‘图片转化base64的代码’)， 将图片转化为base64可以去站长工具,如果大小不合适，可以通过 background-repeat:no-repeat; /** 不重复*/ background-size:contain; /**等比例缩放*/来自适应。...
2020-11-30 16:39:46
2160
1
原创 公众号的外部链接
后端需要前端提供外部链接进行测试，外部链接就是在mounted里写 var url = window.location.href; 再加上域名前缀。
2020-11-25 10:16:23
323
原创 小程序的网络模块封装
在根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com" }, //生产环境 Prod:{ "BaseUrl": "https://api.douban.com" }}然后我一般会在根目录下创建一个h
2020-10-14 15:37:41
204
原创 如何实现两栏布局,三栏布局,水平/垂直居中
两栏布局先写一下样式<div class="box"> <div class="left">左</div> <div class="right">右</div> </div>使用float + margin方式实现<style> div { height: 200px; color: red; } .left {
2020-08-27 21:00:42
1207
原创 GitHub
Github多人协作开发需要公共仓库,在公共仓库中操作,每个人在本地仓库操作，推送到公共仓库，然后还能在公共仓库中提取自己需要的代码.多人协作开发流程有A,B两个人，A创建一个本地仓库并创建一个远程仓库,然后将本地仓库推送到远程仓库，然后B通过远程仓库复制一份A推送的本地仓库，自己就不用创建了，然后将自己更新的内容再推送到远程仓库，然后A再通过远程仓库把最新的内容拿到本地仓库克隆仓库git clone 仓库地址将本地仓库推送到远程仓库先创建本地仓库先cd到远程仓库文件然后git init
2020-08-25 11:26:59
160
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人