重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

「小程序JAVA实战」小程序的表单组件(25)

来说下 ,小程序的基础组件。源码:https://github.com/limingios/wxProgram.git 中的No.12

成都网站建设、做网站的关注点不是能为您做些什么网站,而是怎么做网站,有没有做好网站,给创新互联公司一个展示的机会来证明自己,这并不会花费您太多时间,或许会给您带来新的灵感和惊喜。面向用户友好,注重用户体验,一切以用户为中心。

表单组件

  • button

  • checkbox/label

  • form

  • input

  • picker

  • picker-view

  • radio

  • slider

button的使用

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/button.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >开发能力和api本次不在讲述,等后续跟其他组件结合讲解。


按钮2
按钮3
按钮4
按钮5
按钮6
按钮6

「小程序JAVA实战」小程序的表单组件(25)

checkbox/label的使用

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >开发能力和api本次不在讲述,等后续跟其他组件结合讲解。


  中国
  美国
  俄国



 
    {{item.name}}
 



 
    {{item.name}}
 



 
    {{item.name}}
 


俄国点它可以选中
//button.js

Page({
  data:{
    array:[
      { id: "1001",name: "中国", value: "中国",checked:true,color:'red',disable:false},
      { id: "1002",name: "美国", value: "美国", checked: false, color: 'black', disable: false },
      { id: "1003",name: "俄国", value: "俄国", checked: false, color: 'blue', disable: false },
      { id: "1004",name: "个人主页:idig8.com", value: "idig8.com", checked: false, color: 'yellow', disable: true },
    ]
  }
})

「小程序JAVA实战」小程序的表单组件(25)

form的使用

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/form.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >在web开发中,表单提交很重要,在小程序里面也有对应的表单提交。

form.wxml


  
    中国
    美国
    俄国
  
  提交
  重置

form.js

//form.js

Page({

  changed:function(e){
    debugger;
  },
  formSubmit:function(e){
      console.log(e);
  },
  formReset: function (e) {
      console.log("点击了重置")
  }
})

「小程序JAVA实战」小程序的表单组件(25)

input的输入框

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/input.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >插件什么都考虑到了做的真不错。







输入账号:
输入账号:
输入账号:
长度限制:

手机端调试-点击键盘右下角按钮时是否保持键盘不收起:

手机端调试-右下角文字:

手机端调试-选中状态:
手机端调试-键盘弹起时,是否自动上推页面:
input事件:
//form.js

Page({
  inputEvent:function(){
    console.log("inputEvent");
    return "结果很意外吧这个被替换了"
  },
  focusEvent: function () {
    console.log("focusEvent");
  },
  blurEvent: function () {
    console.log("blurEvent");
  },
  confirmEvent: function () {
    console.log("confirmEvent");
  },
})

「小程序JAVA实战」小程序的表单组件(25)

里面很多的效果需要通过在手机端看到,建议远程小程序看看效果很cool!

picker的使用

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >选择器——从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

picker.wxml

单列选择器


测试选择器--数组


测试选择器--对象




{{myTitle}}


多列选择器


测试选择器--数组


测试选择器--对象


时间选择器

    {{timeLable}}


日期选择器

    {{dateLable}}


城市选择器

    {{cityLable}} 
    

picker.js


//picker.js Page({ data:{   array:['一','二','三','四','五','六','七'],   arrayObject:[     { id: 1001, name: '个人网址'},     { id: 1002, name: 'idig8.com' },     { id: 1003, name: '公众号' },     { id: 1004, name: '编程坑太多' },   ],   myTitle:'请选择点击确定显示结果',   arraymult:[     ['一', '二', '三', '四', '五', '六', '七'],     ['一', '二', '三', '四', '五', '六', '七']   ],   arraymultObject: [     [       { id: 1001, name: '个人网址' },       { id: 1002, name: 'idig8.com' },       { id: 1003, name: '公众号' },       { id: 1004, name: '编程坑太多' },     ],     [       { id: 1001, name: '个人网址' },       { id: 1002, name: 'idig8.com' },       { id: 1003, name: '公众号' },       { id: 1004, name: '编程坑太多' },     ]   ],   timeLable: "请选择时间",   dateLable: "请选择日期",   cityLable: "请选择城市",   region: ['河南省', '郑州市', '中原区'],   customItem: "显示全部" },  mychange:function(){    console.log(' mychange改变了');  },  mycancel:function(){    console.log(' mycancel取消选择了');  },  mychangeResult:function(e){    debugger    console.log(' mychangeResult 点击确定');    var index = e.detail.value;    var id = this.data.arrayObject[index].id;    var name = this.data.arrayObject[index].name;    this.setData({      myTitle:id+name    })  },  mychangemulticolumn:function(e){    console.log(e.detail);  },  mychangemulti: function (e) {    var indexs = e.detail.value;    var arraymultObject = this.data.arraymultObject;    for (var i = 0; i < indexs.length; i++) {      var indexTemp = indexs[i];      var id = arraymultObject[i][indexTemp].id;      var name = arraymultObject[i][indexTemp].name;      console.log(id + name);    }  },  changeTime: function (e) {    this.setData({      timeLable: e.detail.value    });  },  changeDate: function (e) {    this.setData({      dateLable: e.detail.value    });  },  changeCity: function (e) {    debugger;    var codes = "";    var names = "";    for(var i = 0; i

「小程序JAVA实战」小程序的表单组件(25)

picker的使用

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >嵌入页面的滚动选择器。

picker-view.wxml


  {{year}}年{{month}}月{{day}}日
  
    
      {{item}}年
    
    
      {{item}}月
    
    
      {{item}}日
    
  

picker-view.js

const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  months.push(i)
}

for (let i = 1; i <= 31; i++) {
  days.push(i)
}

Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 2,
    days: days,
    day: 2,
    value: [9999, 1, 1],
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

radio

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >单项选择器,内部由多个组成。其实跟checkbox很类似。

radio.wxml



  个人网站:idig8.com
  公众号:编程坑太多
  简书:IT人故事会


选择是{{checkRadio}}


  
    
        {{item.name}}
    
  

radio.js

// pages/radio/radio.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [
      { id: "1001", name: "中国", value: "中国", checked: true, color: 'red', disable: false },
      { id: "1002", name: "美国", value: "美国", checked: false, color: 'black', disable: false },
      { id: "1003", name: "俄国", value: "俄国", checked: false, color: 'blue', disable: false },
      { id: "1004", name: "个人主页:idig8.com", value: "idig8.com", checked: false, color: 'yellow', disable: true }
    ],
    checkRadio:"",
  },
  bindbindChangeRadio:function(e){
      var value = e.detail.value;
      this.setData({
        checkRadio:value
      })

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

「小程序JAVA实战」小程序的表单组件(25)

slider

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >滑动选择器。





个人网站:idig8.com
公众号:编程坑太多



// pages/slider/slider.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myheight:"500rpx",
    staticHeight:500

  },

  iamchanging:function(e){
    var value = e.detail.value;
    var newHeight = this.data.staticHeight * (value/100);
    this.setData({
      myheight: newHeight+"rpx"
    })
  },
  iamchange:function(e){
    var value = e.detail.value;
    var newHeight = this.data.staticHeight * (value / 100);
    this.setData({
      myheight: newHeight + "rpx"
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

「小程序JAVA实战」小程序的表单组件(25)

switch

  • 官方介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

「小程序JAVA实战」小程序的表单组件(25)

  • 演示用例
    >开关选择器。


这是一个开关选择器
开关


个人网站:idig8.com
公众号:编程坑太多
// pages/switch/switch.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    color:"white"
  },

  changeme:function(e){
    var flag = e.detail.value;
    if (flag){
      this.setData({
        color: "white"
      })
    }else{
      this.setData({
        color: "black"
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

「小程序JAVA实战」小程序的表单组件(25)

综合例子

「小程序JAVA实战」小程序的表单组件(25)

PS:小程序视图基本就是这样,最后我在myform做了个简单的例子。虽然做了几个例子,但是说实话还是没官网详细。大家一定要记住:学习小程序最好的方式就是通过官网,我也是通过这样学习的。


本文名称:「小程序JAVA实战」小程序的表单组件(25)
URL标题:http://cqcxhl.cn/article/jggshg.html
在线咨询
服务热线
服务热线:028-86922220
TOP