一、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