wechat-miniprogram / kbone-ui

kbone-ui 是一套能同时支持 小程序(kbone) 和 vue 框架开发的多端 UI 库(PS:新版 kbone-ui 已出炉并迁移到 kbone 主仓库,此仓库仅做旧版维护之用)
https://wechat-miniprogram.github.io/kbone/docs/ui/intro/
MIT License
443 stars 45 forks source link

KPickerView 设置默认值 web端和小程序端实际结果不同 #21

Open OooOooosss opened 4 years ago

OooOooosss commented 4 years ago

1591248484224 web端初始位置无效,小程序正常

JimmyVV commented 4 years ago

好的,这个我跟进看一下

JimmyVV commented 4 years ago

已经修复了,可以使用

+ kbone-ui@0.6.7
rushairer commented 4 years ago

在mp下不响应事件,web下正常

kbone-ui@0.6.7

<template>
  <KView>
    <div class="weui-cells__title">内容</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_active">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea"
                          placeholder="请输入海报内容"
                          rows="10"
                          maxlength="-1"
                          v-model="posterText"></textarea>
            </div>
        </div>
    </div>
    <div class="weui-cells__title">背景色</div>
    <KPickerView indicator-style="height: 60px;"
                 v-model="colorIndex"
                 style="width: 100%; height:120px;"
                 @change="changeColor">
        <KPickerViewColumn>
                    <KView v-for="(item,index) in colors"
                          :style="{lineHeight: '80px', backgroundColor: item}"
                          :key="index" >
                    </KView>
        </KPickerViewColumn>
    </KPickerView>
    <div class="weui-cells__title">预览</div>
    <div class="weui-cell"
        :style="{backgroundColor: color, color: '#FFFFFF'}">
      {{ posterText ? posterText : '这是海报正文' }}
    </div>
    <div class="weui-cell">
        <KButton type="primary" @click="save">保存图片</KButton>
    </div>
  </KView>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  name: 'Home',
  data() {
    return {
      posterText: null,
      colors: [
        '#2C2C2E',
        '#0A84FF',
        '#30D158',
        '#5E5CE6',
        '#FF9F0A',
        '#FF375F',
        '#BF5AF2',
        '#FF453A',
        '#64D2FF',
        '#FFD60A',
      ],
      colorIndex: 0,
      color: null,
    }
  },
  computed: {
  },
  components: {
  },
  created() {
    window.addEventListener('wxload', query => console.log('page1 wxload', query))
    window.addEventListener('wxshow', () => console.log('page1 wxshow'))
    window.addEventListener('wxready', () => console.log('page1 wxready'))
    window.addEventListener('wxhide', () => console.log('page1 wxhide'))
    window.addEventListener('wxunload', () => console.log('page1 wxunload'))

    this.color = this.colors[this.colorIndex]
  },
  methods: {
    changeColor(index) {
      this.color = this.colors[index]
      this.posterText = index
    },
    save() {
    }
  },
})
</script>

<style lang="less">
</style>
JimmyVV commented 4 years ago

已经修复,为了对齐小程序。目前 index 修改为 array 的传入方式:

export default Vue.extend({
  name: 'Home',
  data() {
    return {
      colorIndex: [0],
      color: null,
    }
  },

可以使用 0.6.8 的包试试。