100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序 参数传递

微信小程序 参数传递

时间:2021-02-23 09:43:32

相关推荐

微信小程序 参数传递

一、input输入框值获取传递

<input bindinput='getInputValue' value="{{inputTxt}}" placeholder='请输入' />

取值

getInputValue(e){this.setData({inputCode: e.detail.value})

其中value="{{inputTxt}}重置的时候用到的

reset(){this.setData({inputTxt:'',inputCode:""})},

二、Form表单获取输入值传递

第一步、添加 from 控件,并为其指定 bindsubmit 属性值。

第二步、添加输入控件到 form 中,并为其指定 name 属性值。

第三步、添加 button 控件,并为其指定 form-type=“submit”。

第四步、在 js 中取值时,用 e.detail.value.xxx 或 e.detail.value[“xxx”],其中 xxx 为 name 属性值。

.wxml

<form bindsubmit='formSubmit' bindreset="formReset"><view ><input class="input" type="text" name="inputCode" placeholder='请输入:'/><view>兴趣:<checkbox-group name="cb"><label><checkbox value="A" />乒乓球</label><label><checkbox value="B" checked="false" />羽毛球</label><label><checkbox value="C" checked="{{checked}}" />排球</label></checkbox-group></view><view>级别:<radio-group name="r"><label><radio value="a" />初级</label><label><radio value="b" />中级</label><label><radio value="c" />高级</label></radio-group></view><view><button class="submit_btn" type="primary" form-type='submit'>保 存</button><button class="reset_btn" type="default" form-type='reset'>重 置</button></view></form>

.wxss

formSubmit: function (e) {var that = this;console.log(e.detail.value);var inputCode= e.detail.value.inputCode;if (inputCode!=null&&inputCode!="") {wx.showToast({title: e.detail.value["cb"].join(","),icon: "success",duration: 2000});wx.navigateTo({url: ""})} else {wx.showToast({title: '请输入正确bian号',icon:'none'})}},

input 的取值如前面所述,用 e.detail.value.xxx 或 e.detail.value[“xxx”],其中 xxx 为 name 属性。

checkbox 的取值也是类似 input,不过 xxx 为 checkbox-group 的 name,取出来的值是数组,由选中项的 value 组成,比如选中了“乒乓球”、“排球”,结果就是:[“1”, “3”]。特别说明,这个顺序与我们选择的先后有关,比如我们先选择“排球”,再选择“乒乓球”,结果就是[“3”, “1”]。

radio 的取值和 input 一样,返回的是选中的那一项的 value,没有选中项就是 “”。

三、navigator跳转传递

<navigator url="../or/or?orId={{item.id}}" class="btn">详情</navigator>

直接在目标跳转页面,onLoad里直接获取

onLoad: function (options) {console.log(options.orId)},

四、全局变量传递

app.js

globalData: {phone: "",},

赋值

var app = getApp();app.globalData.phone= "110";

取值

var app = getApp();var userId = app.globalData.phone

五、列表index下标取值

data-[参数]的方式进行传递,下面以充值金额表格为例:

.wxml

<view class="item-num"><view class="{{money==10 ? 'num1 checked' : 'num1'}}" data-amount="10" bindtap="choose">100元</view><view class="{{money==20 ? 'num checked' : 'num default'}}" data-amount="20" bindtap="choose">200元</view><view class="{{money==30 ? 'num checked' : 'num default'}}" data-amount="30" bindtap="choose">300元</view></view>

.js

choose(e) {let data = e.currentTarget.dataset;this.setData({money : data.amount,});console.log(this.data.money);},

.wxss

.item-num{display:flex;justify-content: space-between;margin-bottom: 15rpx;}/*默认未选中的格子样式 */.item-num .num{height: 130rpx;background-color: #F1F3F5;color: #333333;font-size: 32rpx;width: 335rpx;text-align: center;line-height: 130rpx;border-radius:8rpx;margin-left: 9rpx;}/*默认选中的格子样式 */.item-num .num1{height: 130rpx;background-color: #F1F3F5;color: #333333;font-size: 32rpx;width: 335rpx;text-align: center;line-height: 130rpx;border-radius:8rpx;margin-left: rpx;}/*选中的格子背景字体样式 */.item-num .num.checked{background-color: #FFEBE8;color:#337AB7;}.item-num .num1.checked{background-color: #FFEBE8;color:#337AB7;}

可能总结的不够清晰,我会持续改善,小白在路上~欢迎为数不多的读者提意见o

备注:本文有引用到以下网址部分内容,感谢

/yanyaya/blog/1610907

/article/132550.htm

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。