唉呀妈呀
唉呀妈呀
  • 发布:2019-08-23 14:49
  • 更新:2019-08-23 14:49
  • 阅读:1674

【报Bug】nvue的waterfall组件动态切换1列与2列

分类:nvue

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

重现步骤

[步骤]
1.打开http://dotwe.org/vue/7110477ecd249a670e2f7bf956c1a48f,放入我提供的代码,点击点一个图片,可以动态切换1列与2列,

  1. 创建一个nvue页面,放入我提供的代码,代码一样,切换成1列之后就不能切换回2列。
    [结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]2.0.1.20190614

[windows版本号]win10

uni-app运行环境说明

自定义基座
[运行端是h5或app或某个小程序?]
app
[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
cli创建的
[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件模式

App运行环境说明

[iOS版本号]
12.4
[手机型号]
iphone8 PLUS
[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段] <template> <waterfall class="page" ref="waterfall" v-bind:style="{padding:padding}"

column-width="columnWidth" :column-count="columnCount" :column-gap="columnGap"

@scroll="recylerScroll" @loadmore="loadmore" loadmoreoffset=3000

<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<loading-indicator class="indicator"></loading-indicator>
<text class="refreshText">{{refreshText}}</text>
</refresh>
<header class="stickyHeader" >
<div v-if="stickyHeaderType === 'none'" class="stickyWrapper">
<text class="stickyText">Header</text>
</div>
<div v-if="stickyHeaderType === 'appear'" class="stickyWrapper">
<div class="stickyTextImageWrapper">
<text class="stickyText">Last Appear:</text>
<image class="stickyImage" :src="appearImage"></image>
</div>
<div class="stickyTextImageWrapper">
<text class="stickyText">Last Disappear:</text>
<image class="stickyImage" :src="disappearImage"></image>
</div>
</div>
<div v-if="stickyHeaderType === 'scroll'" class="stickyWrapper">
<text class="stickyText">Content Offset:{{contentOffset}}</text>
</div>
</header>
<cell v-for="(item, index) in items" :key="index + 'a'" class="cell" ref="index">
<div class="item" @click="onItemclick(item.behaviour, index)" @appear="itemAppear(item.src)" @disappear="itemDisappear(item.src)">
<text v-if="item.name" class="itemName">{{item.name}}</text>
<image class="itemPhoto" :src="item.src"></image>
<text v-if="item.desc" class="itemDesc">{{item.desc}}</text>
<text v-if="item.behaviourName" class="itemClickBehaviour"> {{item.behaviourName}}</text>
</div>
</cell>
<header class="footer" ref="footer">
<text class="stickyText">Footer</text>
</header>
<div ref="fixed" class="fixedItem" @click="scrollToNext">
<text class="fixedText">bot</text>
</div>
</waterfall>
</template>

<style>
.page {
background-color: #EFEFEF;
}
.refresh {
height: 128px;
width: 750px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.refreshText {
color: #888888;
font-weight: bold;
}
.indicator {
color: #888888;
height: 40px;
width: 40px;
margin-right: 30px;
}
.absolute {
position: absolute;
top: 0px;
width: 750px;
height: 377px;
}
.avatar {
width: 148px;
height: 108px;
border-radius: 54px;
border-width: 4px;
border-color: #FFFFFF;
margin-bottom: 14px;
}
.name {
font-weight: bold;
font-size:32px;
color:#ffffff;
line-height:32px;
text-align:center;
margin-bottom: 16px;
}
.titleWrap {
width: 100px;
height: 24px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.80);
border-radius: 12px;
justify-content: center;
align-items: center;
}
.title {
font-size: 20px;
color: #000000;
}
.stickyHeader {
position: sticky;
height: 94px;
flex-direction: row;
padding-bottom:6px;
}
.stickyWrapper {
flex-direction: row;
background-color:#00cc99;
justify-content: center;
align-items: center;
flex:1;
}
.stickyTextImageWrapper {
flex:1;
justify-content: center;
align-items: center;
flex-direction: row;
}
.stickyText {
color: #FFFFFF;
font-weight: bold;
font-size:32px;
margin-right: 12px;
}
.stickyImage {
width: 64px;
height: 64px;
border-radius: 32px;
}

.cell {
padding-top: 10px;
padding-bottom: 10px;
}
.item {
padding: 10px;
background-color: #FFFFFF;
align-items: center;
}
.itemName {
font-size:28px;
color:#333333;
line-height:42px;
text-align:left;
margin-top: 24px;
}
.itemPhoto {
margin-top: 18;
width: 220px;
height: 220px;
margin-bottom: 18px;
}
.itemDesc {
font-size:24px;
margin:12px;
color:#999999;
line-height:36px;
text-align:left;
}
.itemClickBehaviour {
font-size:36px;
color:#00cc99;
line-height:36px;
text-align:center;
margin-top: 6px;
margin-left: 24px;
margin-right: 24px;
margin-bottom: 30px;
}
.footer {
height: 94px;
justify-content: center;
align-items: center;
background-color: #00cc99;
}

.fixedItem {
position: fixed;
width:78px;
height:78px;
background-color:#00cc99;
right: 32px;
bottom: 32px;
border-radius: 39px;
align-items: center;
justify-content: center;
}
.fixedText {
font-size: 32px;
color: white;
line-height: 32px;
}

</style>

<script>
export default {
data: function() {
const items = [
{
src:'https://gw.alicdn.com/tps/TB1Jl1CPFXXXXcJXXXXXXXXXXXX-370-370.jpg',
name: 'Thomas Carlyle',
desc:'Genius only means hard-working all one\'s life',
behaviourName: 'Change width',
behaviour: 'changeColumnWidth',
},
{
src:'https://gw.alicdn.com/tps/TB1Hv1JPFXXXXa3XXXXXXXXXXXX-370-370.jpg',
desc:'The man who has made up his mind to win will never say "impossible "',
behaviourName: 'Change gap',
behaviour: 'changeColumnGap'
},
{
src:'https://gw.alicdn.com/tps/TB1eNKuPFXXXXc_XpXXXXXXXXXX-370-370.jpg',
desc:'There is no such thing as a great talent without great will - power',
behaviourName: 'Change count',
behaviour: 'changeColumnCount'
},
{
src:'https://gw.alicdn.com/tps/TB1DCh8PFXXXXX7aXXXXXXXXXXX-370-370.jpg',
name:'Addison',
desc:'Cease to struggle and you cease to live',
behaviourName: 'Show scrollbar',
behaviour: 'showScrollbar',
},
{
src:'https://gw.alicdn.com/tps/TB1ACygPFXXXXXwXVXXXXXXXXXX-370-370.jpg',
desc:'A strong man will struggle with the storms of fate',
behaviourName: 'Listen appear',
behaviour: 'listenAppear',
},
{
src:'https://gw.alicdn.com/tps/TB1IGShPFXXXXaqXVXXXXXXXXXX-370-370.jpg',
name:'Ruskin',
desc:'Living without an aim is like sailing without a compass',
behaviourName: 'Set scrollable',
behaviour: 'setScrollable',
},
{
src:'https://gw.alicdn.com/tps/TB1xU93PFXXXXXHaXXXXXXXXXXX-240-240.jpg',
behaviourName: 'waterfall padding',
behaviour: 'setPadding',
},
{
src:'https://gw.alicdn.com/tps/TB19hu0PFXXXXaXaXXXXXXXXXXX-240-240.jpg',
name:'Balzac',
desc:'There is no such thing as a great talent without great will - power',
behaviourName: 'listen scroll',
behaviour: 'listenScroll',
},
{
src:'https://gw.alicdn.com/tps/TB1ux2vPFXXXXbkXXXXXXXXXXXX-240-240.jpg',
behaviourName: 'Remove cell',
behaviour: 'removeCell',
},
{
src:'https://gw.alicdn.com/tps/TB1tCCWPFXXXXa7aXXXXXXXXXXX-240-240.jpg',
behaviourName: 'Move cell',
behaviour: 'moveCell',
}
]

  let repeatItems = [];  
  for (let i = 0; i < 3; i++) {  
    repeatItems.push(...items)  
  }  

  return {  
    padding: 0,  
    refreshing: false,  
    refreshText: '↓   pull to refresh...',  
    columnCount: 2,  
    columnGap: 12,  
    columnWidth: 'auto',  
    contentOffset: '0',  
    showHeader: true,  
    showScrollbar: true,  
    scrollable: true,  
    showStickyHeader: false,  
    appearImage: null,  
    disappearImage: null,  
    stickyHeaderType: 'none',  
    // fixedRect:'',  
    items: repeatItems  
  }  
},  

created() {  
  // let self = this  
  // setTimeout(()=>{  
  //   weex.requireModule('dom').getComponentRect(this.$refs.fixed, result=>{  
  //     const x = result.size.left  
  //     const y = result.size.top  
  //     const width = result.size.width  
  //     const height = result.size.height  
  //     self.fixedRect = `${x}|${y}|${width}|${height}`  
  //   })  
  // }, 3000)  
},  

methods: {  
  recylerScroll: function(e) {  
    this.contentOffset = e.contentOffset.y  
  },  
  loadmore: function(e) {  
    console.log('receive loadmore event')  
    // this.$refs.waterfall.resetLoadmore()  
  },  
  showOrRemoveHeader: function() {  
    this.showHeader = !this.showHeader  
  },  
  onItemclick: function (behaviour, index) {  
    console.log(`click...${behaviour} at index ${index}`)  
    switch (behaviour) {  
      case 'changeColumnCount':  
        this.changeColumnCount()  
        break  
      case 'changeColumnGap':  
        this.changeColumnGap()  
        break  
      case 'changeColumnWidth':  
        this.changeColumnWidth()  
        break  
      case 'showScrollbar':  
        this.showOrHideScrollbar()  
        break  
      case 'listenAppear':  
        this.listenAppearAndDisappear()  
        break  
      case 'setScrollable':  
        this.setScrollable()  
        break  
      case 'setPadding':  
        this.setRecyclerPadding()  
        break  
      case 'listenScroll':  
        this.listenScrollEvent()  
        break  
      case 'removeCell':  
        this.removeCell(index)  
        break  
      case 'moveCell':  
        this.moveCell(index)  
        break  
    }  
  },  

  itemAppear: function(src) {  
    this.appearImage = src;  
  },  

  itemDisappear: function(src) {  
    this.disappearImage = src;  
  },  

  changeColumnCount: function() {  
    if (this.columnCount === 2) {  
      this.columnCount = 3  
    } else {  
      this.columnCount = 2  
    }  
  },  

  changeColumnGap: function() {  
    if (this.columnGap === 12) {  
      this.columnGap = 'normal'  
    } else {  
      this.columnGap = 12  
    }  
  },  

  changeColumnWidth: function() {  
    if (this.columnWidth === 'auto') {  
      this.columnWidth = 600  
    } else {  
      this.columnWidth = 'auto'  
    }  
  },  

  showOrHideScrollbar: function() {  
    this.showScrollbar = !this.showScrollbar  
  },  

  setScrollable: function() {  
    this.scrollable = !this.scrollable  
  },  

  listenAppearAndDisappear: function() {  
    this.stickyHeaderType = (this.stickyHeaderType === 'appear' ? 'none' : 'appear')  
  },  

  listenScrollEvent: function() {  
    this.stickyHeaderType = (this.stickyHeaderType === 'scroll' ? 'none' : 'scroll')  
  },  

  scrollToNext: function() {  
    weex.requireModule('dom').scrollToElement(this.$refs.footer)  
  },  

  setRecyclerPadding: function() {  
    this.padding = (this.padding == 0 ? 12 : 0);  
  },  

  removeCell: function(index) {  
    this.items.splice(index, 1)  
  },  

  moveCell: function(index) {  
    if (index == 0) {  
      this.items.splice(this.items.length - 1, 0, this.items.splice(index, 1)[0]);  
    } else {  
      this.items.splice(0, 0, this.items.splice(index, 1)[0]);  
    }  
  },  

  onrefresh (event) {  
    this.refreshing = true  
    this.refreshText = "loading..."  
    setTimeout(() => {  
      this.refreshing = false  
      this.refreshText = '↓   pull to refresh...'  
    }, 2000)  
  },  

  onpullingdown (event) {  
    if (event.pullingDistance < -64) {  
      this.refreshText = '↑   release to refresh...'  
    } else {  
      this.refreshText = '↓   pull to refresh...'  
    }  
  }  
}  

}
</script>

联系方式

[QQ]375016920

2019-08-23 14:49 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复