B2C电商
B2B交易系统
智慧门店
分销商城
社区电商
查看更多

怎么开小程序商城店铺
  • 店铺开通

    销客多小程序商城,可快速开通上架店铺

  • 拉新推广

    链接12亿微信流量,拉新工具沉淀意向客户

  • 复购裂变

    拼团、分销等提升转化,不断裂变新用户购买

  • 对接门店

    线上导流、促活门店,实现线上下同步发展

制作小程序
HiShop > Hi小程序 > 小程序开发 >

微信小程序示例讲解:多列模式和省市区类型代

2017-09-13 作者:黄保

  微信小程序开发实例讲解之微信小程序城市列表,很多人都想问微信小程序城市列表怎么做的?下面从多个方面来谈谈微信小程序城市列表。

  7月16日开始,阿里巴巴国际站将实施重复铺货处罚新规。对于重复铺货商品占“审核通过且已上架”商品量≥10%且重复铺货商品数≥100的商家,或者,店铺重复铺货产品数≥1000的商家,阿里巴巴国际站将根据规则进行处罚和通知。

 

昨日,小程序开发者工具又更新啦!这次又推出了一些比较棒的功能,个人觉得这个省市区联动还是比较棒的,特此贴出源码供大家查看~
 

 

picker-view

嵌入页面的滚动选择器

注意:其中只可放置组件,其他节点不会显示。

picker-view-column

仅可放置于中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

示例代码:

<view>
  <view>{{year}}年{{month}}月{{day}}日view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年view>
    picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月view>
    picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日view>
    picker-view-column>
  picker-view>
view>
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,
    year: date.getFullYear(),
    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]]
    })
  }
})

微信小程序示例讲解:多列模式和省市区类型代

Tips

  1. tip: 滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

  想了解更多关于微信小程序开发实例教程内容,可以点击阅读微信小程序开发教程

推荐文章

注册小程序
注册小程序