zoukankan      html  css  js  c++  java
  • 微信小程序 mpvue + picker

    用mpvue框架和原生的微信小程序有一定差异性,之前在做选择器的时候用原生的方法怎么都不行,最后找到了解决办法。

    数据为数组,代码如下:

    <template>
      <div class="cost-estimation">
        <view class="section">
          <picker mode="selector" @change="bindPickerChange" :index="index" :range="array">
            <view>
              当前选择的国家:{{array[index]}}
            </view>
          </picker>
        </view>
      </div>
    </template>

    <script>
    export default {
      data () {
        return {
          array: ['中国', '美国', '日本', '韩国'],
          index: 0
        }
      },
      methods: {
        bindPickerChange: function (e) {
          console.log('picker发送选择改变,携带值为', e)
          this.index = e.mp.detail.value
        }
      }
    }
    </script>
     
    数据为数组对象,代码如下:
    <template>
      <div class="cost-estimation">
        <view class="section">
          <picker mode="selector" @change="bindPickerChange" :index="index" :range="objectarray" :range-key="'name'">
            <view>
              当前选择的国家:{{objectarray[index].name}}
            </view>
          </picker>
        </view>
      </div>
    </template>

    <script>
    export default {
      data () {
        return {
          objectarray: [
            {
              id: 1,
              name: '中国'
            },
            {
              id: 1,
              name: '美国'
            },
            {
              id: 1,
              name: '日本'
            },
            {
              id: 1,
              name: '韩国'
            }
          ],
          index: 0
        }
      },
      methods: {
        bindPickerChange: function (e) {
          this.index = e.mp.detail.value
        }
      }
    }
    </script>
     
    注意: 1、在 mpvue 中 template 部分不是 bindchange 也不是 @click
                2、数据为数组对象时,range-key 对应的 'name' 要加引号
  • 相关阅读:
    spool使用
    webservice项目部署部署到weblogic报错之解决方案
    cxf , struts+spring中web.xml过滤url问题解决方案
    eclipse配置SVN
    Oracle中的dual表
    tomcat在eclipse启动成功却打不开tomcat主页
    java作用域public ,private ,protected
    final static
    sql server 通明加密
    检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 80070005。
  • 原文地址:https://www.cnblogs.com/Nxx-clara/p/11610954.html
Copyright © 2011-2022 走看看