This repository was archived by the owner on Jul 7, 2025. It is now read-only.
This repository was archived by the owner on Jul 7, 2025. It is now read-only.
KPickerView on change not working in mp mode #14
Description
vue 2.6.11, kbone-ui 0.6.2
<template>
<div class="cnt">
<Header></Header>
<div>
<KPickerView
indicator-style="height: 50px;"
style="width: 100%; height: 300px;"
@change="changeIndex"
>
<KPickerViewColumn>
<KView
v-for="(item,index) in singleData"
style="line-height: 50px;"
:key="index"
>
{{item}}
</KView>
</KPickerViewColumn>
</KPickerView>
</div>
<!-- vue-improve-loader -->
<div check-reduce>
<p>这段话不会在小程序里显示</p>
<p>在构建的时候就会被 vue-improve-loader 给干掉了</p>
</div>
<!-- reduce-loader -->
<Web>
<p>这段话也不会在小程序里显示</p>
<p>在构建的时候就会被 reduce-loader 给干掉了</p>
</Web>
<!-- 样式隐藏 -->
<div class="for-web">
<p>这段话也不会在小程序里显示</p>
<p>在渲染时会被样式隐藏</p>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Vue from 'vue'
import Header from '../common/Header.vue'
import Footer from '../common/Footer.vue'
import Web from 'reduce-loader!../common/Web.vue'
import 'reduce-loader!./web'
import { KPickerView, KView, KPickerViewColumn } from 'kbone-ui'
export default Vue.extend({
name: 'Home',
components: {
Header,
KPickerView,
KPickerViewColumn,
Footer,
Web,
},
data() {
return {
singleData: ['a', 'b', 'c', 'd']
}
},
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'))
if (process.env.isMiniprogram) {
console.log('I am in miniprogram')
} else {
console.log('I am in Web')
}
},
methods: {
changeIndex(e) {
console.log('changeIndex', this.singleData[e])
},
onClickJump() {
window.location.href = '/test/list/123'
},
onClickOpen() {
window.open('/test/detail/123')
},
},
})
</script>
<style lang="less">
.cnt {
margin-top: 20px;
}
a,
button {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
border: 1px solid #ddd;
}
.miniprogram-root {
.for-web {
display: none;
}
}
</style>