微信小程序常见问题解决
2017-09-30 11:31
211 查看
居中
input
从子页面返回数据给父页面
切换tab页
动态改变样式,如字体颜色等
设置整个页面的背景
设置背景图片
利用模板
更新模板数据
简单的动画
页面间传递对象数据
post请求
控制小数点位数
判断是否是合法的数字
display: flex; flex-direction: row; justify-content: center; align-items: center;
input
<!--通过value控制input的值,placeholder控制输入提示--> <!--通过page的setData()方法,动态改变input的值--> <!--通过bindconfirm监听处理键盘确定按键事件--> <!--通过bindblur方法监听失去焦点事件--> <input type="number" confirm-type="done" value="{{car_price}}" placeholder-style="color:#FF6000;margin-right:10rpx;font-size:28rpx;" placeholder="请输入" class="car-price" bindconfirm="changeCarPrice" bindblur="changeCarPrice"/>
从子页面返回数据给父页面
wx.navigateBack() //返回上一页 var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.length - 2]; //上一个页面 <!--直接通过prevPage调用上一页的方法或是直接赋值--> prevPage.setCarInfo({ "car_model": e.currentTarget.dataset.car, "car_price": 289000 })
切换tab页
wx.switchTab({ url: '../CMSpecialCar/CMSpecialCar', })
动态改变样式,如字体颜色等
<text style="color:{{text_color}}">推荐车型</text> <!--Js文件离直接通过赋值改变--> this.setData({ color: '#ffffff' })
设置整个页面的背景
<!--对应的wxss文件中--> /* 整个页面背景 */ page { display: block; min-height: 100%; background-color: #EFEFF4; }
设置背景图片
<!--设置本地图片为背景图片需要将图片转成Base64编码;或是直接用图片地址;background-size: contain;用于解决可能的图片显示不全--> <view style="background-image:url(图片的Base64编码);background-size: contain;" <!--background-size:100% 100%;//不保持纵横比缩放图片,使图片的宽高完全拉伸至填满--> <!--background-size:contain;//保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。--> <!--background-size:cover;//保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。-->
利用模板
<!--wxss 文件--> @import "../CMTemplate/CMTTip.wxss"; <!--wxml 文件--> <import src="../CMTemplate/CMTCalculateTop"/> <template is="calculateTop" data="{{...top_item}}"></template>
更新模板数据
data: { loan_item: { radio_index: 0, ratio_array: ['10%', '20%', '30%'], period_index: 2, period_array: ['1年', '2年', '3年'], tail_index: 1, tail_array: ['0%', '30%'], }, } bindRatioChange: function (e) { var that = this console.log('首付比例:', e.detail.value) that.setData({ 'loan_item.radio_index': e.detail.value, }) },
简单的动画
<!--view中设置animation属性--> <view animation="{{carListAnimation}}" class="car_box" wx:if="{{showCarStatus}}"> <!--Js文件中生成动画--> showCarModel: function () { <!--生成动画--> var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) var that = this that.animation = animation <!--设置动画的方向--> animation.translateX(300).step() <!--将动画传到对应的view上,通过控制showModelStatus来控制view的显示和隐藏--> that.setData({ carListAnimation: animation.export(), showModelStatus: true }) setTimeout(function () { animation.translateX(0).step() that.setData({ carListAnimation: animation.export() }) }.bind(that), 200) },
页面间传递对象数据
<!--先把对象转为字符串--> let str=JSON.stringify(that.data.car); <!--通过navigate url传递--> wx.navigateTo({ url: '../CMpreferenceCommit/CMpreferenceCommit' + "?car=" + str, }) <!--onLoad里面通过options获取参数,然后转成对象--> onLoad:function(options){ // 生命周期函数--监听页面加载 var car = JSON.parse(options.car) },
post请求
wx.request({ url:url method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' },//这样POST 请求会将data的值放在Query String Parameters里面。 data: { 'userName': that.userName, 'userPhone': that.userPhone, 'whichPage': that.data.whichPage }, complete:function(res) { console.log('complete',res.data) if(res.data.success) { wx.showToast({ title: '提交成功', }) } } })
控制小数点位数
toFixed(2)
判断是否是合法的数字
if (isNaN(new Number(monthlyAmount))) { wx.showToast({ title: '输入有误', }) return false; }
相关文章推荐
- 微信小程序常见问题->上传文件后如何在后台(php)获取文件名解决方法
- 微信小程序常见问题->上传文件后如何在后台(php)获取文件名解决方法
- 【微信小程序常见问题】不在以下合法域名列表解决方案
- 【微信小程序常见问题】使用picker组件显示年份解决方案
- Delphi XE8中开发DataSnap程序常见问题和解决方法 (-)启动创建好的DBExpress工程时候报错了!
- Delphi XE8中开发DataSnap程序常见问题和解决方法 (三)用TClientDataSet的“ProviderName”属性连接服务器时,无法找到服务器端的“DatasetProvier”
- 从session原理出发解决微信小程序的登陆问题
- 微信小程序 HTTPS报错整理常见问题及解决方案
- 微信小程序开发常见问题
- 微信小程序 fixed 解决 textarea 的 placeholder 不固定问题
- 解决 web服务器部署常见问题,server application unavailable 和 程序无法连接数据库 的问题(asp.net 2.0 + oracle9i + winXP)
- 解决微信小程序ios请求ssl错误问题 windows server 2008 R2默认ssl2.0 改成1.2的
- 微信小程序常见问题及新手跳坑指南
- 微信小程序常见问题-为什么可以在微信开发者工具中使用http
- 微信小程序 navigate页面跳转问题解决方案
- 二叉树的常见问题及其解决程序
- 微信小程序开发常见问题分析
- 二叉树的常见问题及其解决程序
- 微信小程序开发常见问题
- 微信小程序开发常见问题FAQ之七