pp电子

登录
免费开通
产品中心
更多服务

用实例解说微信小程序都会选择器怎么弄 ？？？？

—— 2017 ——
07/13
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2017/7/13 0:00:00 泉源：不详 作者：未知

微信小程序开发很主要的一个内容，，微信小程序都会选择器的使用，，详解微信小程序开发之都会选择器 都会切换,很是具有适用价值,需要的朋侪可以参考下。。。。

 

都会选择器 region

用实例解说微信小程序都会选择器怎么弄 ？？？？

//index.wxml
<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
  <view class="picker">
    目今选择：{{region[0]}}，，{{region[1]}}，，{{region[2]}}
  view>
picker>

//index.js
data: {
    region: ['广东省', '广州市', '海珠区']
}

多列选择器 multiSelector

用实例解说微信小程序都会选择器怎么弄 ？？？？  脑残没有关注官方更新，，自己写了个都会选择器。。。。

// City.js

//  省份
var provinceList = [
  { "id": "11", "name": "北京", "initial": "B" },
  ...];

var cityList = [
  {
    "provinceId": "11",
    "citys": [
      { "id": "1", "name": "昌平" },
     ...]
  }
];
//  点击省份，，获取都会列表
function getCitysById(id) {
  let provinceId = provinceList[id].id;
  var tempObj = [];
  for (let i = 0; i < cityList.length; i++) {
    if (cityList[i].provinceId == provinceId) {
      tempObj = cityList[i].citys;
      break;
    }
  }
  return tempObj;
}

module.exports = {
  provinceList: provinceList,
  getCitysById: getCitysById
}

// Picker.wxml

<picker mode="multiSelector" value="{{index}}" bindcolumnchange="bindPickerChange" range="{{province}}" range-key="{{'name'}}">
  <view class="picker">
    目今选择：{{province[0][0].name}}{{province[1][0].name}}
  view>
picker>

// Picker.js

// picker.js
var cityObj = require("../../utils/city")
Page({
  data: {
    index: 0
  },
  onLoad: function (options) {
    var defaultCitys = cityObj.getCitysById("0")
    this.setData({
      province: [cityObj.provinceList, defaultCitys]
    })
  },
  bindPickerChange(e) {
    if (e.detail.column == 0) {
      var citys = cityObj.getCitysById(e.detail.value);
      this.setData({
        province: [cityObj.provinceList, citys]
      })
    }
  }
})

时间选择器 time

用实例解说微信小程序都会选择器怎么弄 ？？？？

<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  <view class="picker">
    目今选择: {{time}}
  view>
picker>

日期选择器 date

用实例解说微信小程序都会选择器怎么弄 ？？？？

<picker mode="date" value="{{time}}" start="2015-09-01" end="2017-09-01" fields="month" bindchange="bindTimeChange">
  <view class="picker">
    目今选择: {{time}}
  view>
picker>

rich-text

  • 属性：nodes 类型：Array / String 结点列表 / HTML String
  • 全局支持class和style属性，，不支持id属性。。。。
  • 结点类型：type = node  name 标署名 String 是 支持部分受信任的HTML结点  attrs 属性 Object 否 支持部分受信任的属性，，遵照Pascal命名法  children 子结点列表 Array 否 结构和nodes一致
  • 结点类型：type = text  text 文本 String 是 支持entities
  • nodes 不推荐使用 String 类型，，性能会有所下降
  • rich-text 组件内屏障所有结点的事务。。。。
  • attrs 属性不支持 id ，，支持 class 。。。。
  • name 属性巨细写不敏感。。。。
  • 若是使用了不受信任的HTML结点，，该结点及其所有子结点将会被移除。。。。
  • img 标签仅支持网络图片。。。。
<rich-text nodes="{{nodes}}" />
<rich-text nodes="{{nodes1}}" />
<rich-text nodes="{{nodes2}}" />

用实例解说微信小程序都会选择器怎么弄 ？？？？

this.setData({
    nodes: "

html问题

", nodes1: [{ name: "h1", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '结点列表问题' }] }], nodes2: [{ name: "ul", attrs: { style: "padding:20px;border:1px solid blue;", class: "red" }, children: [ { name: "li", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '多层结点 无序列表' }], }, { name: "li", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '多层结点 无序列表1' }], }] }] })
 


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，由于未联系到知识产权人或未发明有关知识产权的挂号，，若有知识产权人并不肯意我们使用，，若是有侵权请连忙联系。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，仅系客观性形貌，，如您需要相识该类商品/服务详细的资讯，，请您直接与该类商品/服务的提供者联系。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。

KESION 一直通过手艺立异，，提供产品和服务，，助力企业向数字化转型，，通过科技驱动商业刷新，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



上/下篇

  • 小程序实例开发只显示群ID 不显示群名称怎么办

    微信小程序开发实例解说，，微信小程序已经开放了群ID和群名称，，可是许多人并不知道怎么获得群名称。。。。现在，，hi商学院终于有要领可以显示群名称啦！...

    微信小程序开发微信小程序 2017/7/13 0:00:00

  • 微信小程序底层的实现原理开发实战说明

    微信小程序底层的实现原理开发实战说明，，今天hishop为各人整理分享。。。。着实这篇文章应该算是一篇拾遗。。。。从map组件提及在今天宣布的开发文档里，，我们知道使用一个地图组件的时间是这样子的...

    微信小程序开发微信小程序SaaS 2017/7/12 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
用实例解说微信小程序都会选择器怎么弄 ？？？？ - KE