数值比较

一

<view>

  <text>请输入第1个数字：</text>

  <input type="number" bindchange="num1change" />

</view>

<view>

  <text>请输入第2个数字：</text>

  <input type="number" bindchange="num2change" />

</view>

<button bindtap="compare">比较</button>

<view>

  <text>比较结果：{{result}}</text>

</view>


Page({

  data: {

    result: ''

  },

  num1: 0, // 保存第1个数字

  num2: 0, // 保存第2个数字

  num1change: function(e) {

    this.num1 = Number(e.detail.value)

    console.log('第1个数字为' + this.num1)

  },

  num2change: function(e) {

    this.num2 = Number(e.detail.value)

    console.log('第2个数字为' + this.num2)

  },

  compare: function(e) {

    var str = '两数相等'

    if (this.num1 > this.num2) {

      str = '第1个数大'

    } else if (this.num1 < this.num2) {

      str = '第2个数大'

    }

    this.setData({

      result: str

    })

    // this.data.result = str // 这种方式无法改变页面中的{{result}}的值

  }

})

二

1）

<view>

  <text>请输入第1个数字：</text>

  <input id="num1" type="number" bindchange="change" />

</view>

<view>

  <text>请输入第2个数字：</text>

  <input id="num2" type="number" bindchange="change" />

</view>

<button bindtap="compare">比较</button>

<view>

  <text>比较结果：{{result}}</text>

</view>


Page({

  data: {

    result: ''

  },

  num1: 0, // 保存第1个数字

  num2: 0, // 保存第2个数字

  change: function (e) {

    this[e.currentTarget.id] = Number(e.detail.value)

  },

  compare: function (e) {

    var str = '两数相等'

    if (this.num1 > this.num2) {

      str = '第1个数大'

    } else if (this.num1 < this.num2) {

      str = '第2个数大'

    }

    this.setData({

      result: str

    })

  }

})

2）

<view>

  <text>请输入第1个数字：</text>

  <input type="number" bindchange="change2" data-id="num1" />

</view>

<view>

  <text>请输入第2个数字：</text>

  <input type="number" bindchange="change2" data-id="num2" />

</view>

<button bindtap="compare">比较</button>

<view>

  <text>比较结果：{{result}}</text>

</view>


Page({

  data: {

    result: ''

  },

  num1: 0, // 保存第1个数字

  num2: 0, // 保存第2个数字

  change2: function (e) {

    this[e.target.dataset.id] = Number(e.detail.value)

  },

  compare: function (e) {

    var str = '两数相等'

    if (this.num1 > this.num2) {

      str = '第1个数大'

    } else if (this.num1 < this.num2) {

      str = '第2个数大'

    }

    this.setData({

      result: str

    })

  }

})

三

<view>

  <text>请输入第1个数字：</text>

  <input type="number" bindchange="change3" data-id="num1" />

</view>

<view>

  <text>请输入第2个数字：</text>

  <input type="number" bindchange="change3" data-id="num2" />

</view>

<view>

  <text>比较结果：{{num1 > num2 ? '第1个数大' : (num1 < num2 ? '第2个数大' : '两数相等')}}</text>

</view>


Page({

  data: {

    num1: 0,  // 在data中新增num1

    num2: 0,  // 在data中新增num2

    result: ''

  },

  change3: function(e) {

    var data = {}

    data[e.target.dataset.id] = Number(e.detail.value)

    this.setData(data)

  }

})

四

<view>

  <text>请输入第1个数字：</text>

  <input type="number" bindchange="change3" data-id="num1" />

</view>

<view>

  <text>请输入第2个数字：</text>

  <input type="number" bindchange="change3" data-id="num2" />

</view>

<view>

  <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>

  <text wx:if="{{num1 < num2}}">比较结果：第2个数大</text>

  <text wx:if="{{num1 == num2}}">比较结果：两数相等</text>

</view>

<view>

  <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>

  <text wx:elif="{{num1 < num2}}">比较结果：第2个数大</text>

  <text wx:else>比较结果：两数相等</text>

</view>

<view>

  <block wx:if="{{num1 > num2}}">

    <text>比较结果：第1个数大</text>

  </block>

  <block wx:elif="{{num1 < num2}}">

    <text>比较结果：第2个数大</text>

  </block>

  <block wx:else>

    <text>比较结果：两数相等</text>

  </block>

</view>


Page({

  data: {

    num1: 0,  // 在data中新增num1

    num2: 0,  // 在data中新增num2

    result: ''

  },

  change3: function (e) {

    var data = {}

    data[e.target.dataset.id] = Number(e.detail.value)

    this.setData(data)

  }

})

五

<form bindsubmit="formCompare">

  <view>

    <text>请输入第1个数字：</text>

    <input type="number" name="num1" />

  </view>

  <view>

    <text>请输入第2个数字：</text>

    <input type="number" name="num2" />

  </view>

  <button form-type="submit">比较</button>

</form>

<view>

  <text>比较结果：{{result}}</text>

</view>


Page({

  formCompare: function (e) {

    var str = '两数相等'

    var num1 = Number(e.detail.value.num1)

    var num2 = Number(e.detail.value.num2)

    if (num1 > num2) {

      str = '第1个数大'

    } else if (num1 < num2) {

      str = '第2个数大'

    }

    this.setData({ result: str })

  }

})

问卷调查

<view class="container">

  <form>

    <view class="nn">

      <text>姓名:</text>

      <input type="text" name="name" value="{{name}}"/>

    </view>

   <view class="ss">

       <text>性别:</text>

      <radio-group name="gender">

        <label wx:for="{{gender}}"   wx:key="value">

          <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}

        </label>

      </radio-group >

    </view>

    <view class="zz">

      <text>喜欢的运动:</text>

      <checkbox-group name="sports">

        <label wx:for="{{sports}}" wx:key="*this">

          <checkbox value="{{item.value}}" checked="{{item.checked}}" />{{item.zm}}

        </label>

      </checkbox-group>

    </view>

  </form>

</view>


Page({

  data: {

    name: '王五',

    gender: [{

        name: '男',

        value: '0',

        checked: false

      },

      {

        name: '女',

        value: '1',

        checked: true

      }

    ],

    sports: [{

        zm: '跑步',

        value: 'pb',

        checked: false

      },

      {

        zm: '打篮球',

        value: 'dlq',

        checked: true

      },

      {

        zm: '踢足球',

        value: 'tzq',

        checked: false

      },

      {

        zm: '跳绳',

        value: 'ts',

        checked: true

      }

    ]

  }

})


双向联动

<view class="tab">

  <view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" id="0">粉色</view>

  <view class="tab-item {{item==1?'active':''}}" bindtap="changeItem"  id="1">绿色</view>

  <view class="tab-item {{item==2?'active':''}}" bindtap="changeItem"  id="2">蓝色</view>

</view>

<swiper current="{{item}}" bindchange="changeTab" circular="true">

  <swiper-item>

    <view style="background:pink;"></view>

  </swiper-item>

  <swiper-item>

    <view style="background:green;"></view>

  </swiper-item>

  <swiper-item>

    <view style="background:blue;"></view>

  </swiper-item>

</swiper>


Page({

  data:{

      item:0

  },

  changeItem(e){

    // console.log(e)

    this.setData({

    item:e.currentTarget.id

    })

  },

  changeTab(e){

    // console.log(e)

    this.setData({

      item:e.detail.current

    })

  }

})



表单

<form bindsubmit="formSubmit">

    <view class="content">

        <view>

            <input name="xm" type="text"  placeholder="输入您的姓名:" placeholder-class="phcolor" />

        </view>

        <view>

            <input name="phone" type="text"  placeholder="输入您的手机号:" placeholder-class="phcolor" />

        </view>

        <view>

            <picker name="num"  bindchange="pickerChange"   range="{{picker.arr}}">

                参加婚礼人数：{{picker.arr[picker.index]}}

            </picker>

        </view>

        <button form-type="submit" >提交</button>

    </view>

</form>



Page({

  data: {

    picker: {

      arr: ['1', '2', '3', '4', '5', '6'],

      index: 0

    }

  },

  pickerChange: function(e) {

    console.log(e)

    this.setData({

      'picker.index': e.detail.value

    })

  },

  formSubmit: function(e) {

    console.log(e)

    var name = e.detail.value.xm

    var phone = e.detail.value.phone

    if(name&&phone.length==13)

    {

      wx.showToast({

        title: '提交成功',

        icon: 'success',

        duration: 1500

      })

    }

    else{

      wx.showToast({

        title: '信息错误',

        icon: 'error',

        duration: 1500

      })

    }

  }

})



Map

<map id="map" bindcontroltap="bindControlTap" latitude="{{latitude}}" longitude="{{

longitude}}" scale="{{scale}}" markers="{{markers}}" bindmarkertap="markerTap"  controls="{{controls}}" show-location></map>



Page({

  data: {

    longitude: null, // 地图中心点经度

    latitude: null, // 地图中心点纬度

    scale: '18', // 缩放

    markers: [{

      iconPath: '/images/navi.png',

      id: 0,

      latitude: 34.657061,

      longitude: 112.399063,

      width: 50,

      height: 50

    }]

  },

  mapCtx: null,

  onLoad: function(){

    //获取设备信息

    this.mapCtx = wx.createMapContext('map')

    wx.getSystemInfo({

      success: res=> {

        // console.log(res)

        var mapw = res.windowWidth // 宽度

        var maph = res.windowHeight // 高度

        this.setData({

          maph: maph + 'px',

          // 设置控件显示

          controls:[{

            id:1,

            iconPath:'/images/gps.png',

            position:{

              left: 10,

              top: maph - 50,

              width: 40,

              height: 40

            },

            clickable:true// 可以点击控件

          }]

        })

      },

    })

  },

    // 获取当前位置(经纬度)

  onReady: function() {

    wx.getLocation({

      type: 'gcj02',

      success: res => {

        // console.log(res)

        this.setData({

          longitude: res.longitude,

          latitude: res.latitude

        })

      }

    })

  },

  markerTap() {

    wx.openLocation({ //打开微信小程序内部地图

      latitude: this.data.markers[0].latitude,

      longitude: this.data.markers[0].longitude,

      name: '新友谊大酒店',

      address: '洛阳市涧西区牡丹广场'

    })

  },

  bindControlTap: function(e) {

    console.log(e)

    var id = e.controlId

    if (id === 1) {

       // 将地图中心移动到当前定位点

        this.mapCtx.moveToLocation()

    }

  }

})