小程序数据的交互操作随笔

属性绑定

<view class="createGroupfn_box {{but_switch?'active1':'active2'}}">
      <view class="text_v">
         <text>群名称</text>
         <input value="{{group_name_val}}" bindinput="bindinputfn"></input>
      </view>
</view>

类名属性判断绑定

class="createGroupfn_box {{but_switch?'active1':'active2'}}

事件绑定

bindinput="bindinputfn"

内容绑定

<text>{{text1}}</text>

属性设置

<view style="height:{{statusbar}}px"></view>

data: {
   statusbar: ''
 },
this.setData({
     statusbar: statusbarH
   })

弹出框

• wx.showToast()

• • title：显示的提示信息，在没有图标的情况下，文本内容可显示两行

  • icon: 显示的图标

  • • success：成功图标
    • loading：加载图标
    • none：没有图标

  • image：自定义显示的图标，优先级高于icon

  • duration：延迟的时间，弹出框弹出后的显示时间

  • mask：true/false是否显示遮罩层

  • success：接口调用成功的回调函数

  • fail：接口调用失败的回调函数

  • complete：不管成功还是失败都会执行的函数

注：一般在点击事件中调用，可结合使用wx.hideTotast来使用，

• wx.showLoading()

• • title：加载的提示信息eg：玩命加载中…
  • mask：是否现思遮罩层
  • success：接口调用成功的回调函数
  • fail：接口调用失败的回调函数
  • complete：无论成功还是失败都会执行的函数

注：一般需要结合使用wx.hideLoading()；来使用可分别在onLoad和onReady中使用，数据渲染完成后关闭

• wx.showModal()

• • title：提示信息的标题
  • content：提示信息的内容
  • showCancel：true/false是否显示取消按钮
  • cancelText：取消按钮的文本内容，不得超过四个字符
  • cancelColor：取消按钮的文本颜色，默认#000000
  • confirmText：确认按钮的文本内容，不得超过四个字符
  • confirmColor：却惹按钮的文本颜色，默认#000000
  • success：接口成功的回调
  • fail：接口失败的回调

• complete：无论成功或失败都会嗲用

注：一般带年纪确认或取消，我们需要在success中进行事件的判断处理

参考地址

https://www.cnblogs.com/bgwhite/p/9335648.html

image标签问题

image 后面加/

<img src="/pages/static/img/icon1" alt=""/>

image默认宽高

微信小程序中image标签发现系统有个默认的宽高，会影响到image样式，解决办法：在image标签中加上属性mode='widthFix',就可以了。

for遍历渲染

<view class="xjrw_list_li" wx:for="{{datalist}}" wx:for-item='item' wx:for-index='index'></view>

条件渲染

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

数据绑定

数据获取和vue不一样 需要this,data.xxx

page({
	data:{
		name:"我叫小明"
	},
	showData:function(){
		var text = this.data.name
	}
})

设置数据方法

设置数据方法

this.setData({
      account: e.detail.value
    })

获取data数据方法、

showData:function(){
		var text = this.data.name
	}

input数据双向绑定

一，手动进行双向绑定

1.绑定事件

<input type="text" bindinput="handleInput"/>

2.定义data数据

data: {
     msg:'',
         }

3.实时将e.detail.value输入框的值赋给数据msg

handleInput(e) {
    //e.detail.value为input框的数据
    //输入事件中，实时将e.detail.value输入框的值赋给数据msg。
    this.setData({
        msg:e.detail.value
    })
}