uView（u-collapse）摺疊 展開 高度問題 無法撐開 nextTick

长空5發表於2024-04-25
View
    <u-collapse ref="myCollapse" @change="change" accordion>
      <u-collapse-item v-for="(level,index) in levelList" :key="index" :title="level.name" ref="collapseHeight">
        <view class="">
          <view v-for="(film,i) in filmList" :key="i" class="u-p-20">
            {{film.name}}
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>

      async change(list) {
        const index = list.findIndex((item) => {
          return item.status === 'open'
        })
        if (index === -1) {
          return
        }
        this.filmList = await this.getFilmData(index + 1)

        this.$nextTick(() => {
          this.$refs.myCollapse.init();
        })
      },

collapse是手風琴模式。
資料levelList、filmList，都是非同步載入。levelList渲染正常。

filmList資料在載入完成後，按照官方文件提供的方法：init(); 重新計算高度。但是無法正常撐開。

試了網上的多個方法，但是都沒有效果。

於是分析了下原始碼，發現註釋掉一行程式碼就行。檔案路徑：uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue

this.expanded = this.name == value


			// 非同步獲取內容，或者動態修改了內容時，需要重新初始化
			init() {
				// 初始化資料
				this.updateParentData()
				if (!this.parent) {
					return uni.$u.error('u-collapse-item必須要搭配u-collapse元件使用')
				}
				const {
					value,
					accordion,
					children = []
				} = this.parent

				if (accordion) {
					if (uni.$u.test.array(value)) {
						return uni.$u.error('手風琴模式下，u-collapse元件的value引數不能為陣列')
					}
					// this.expanded = this.name == value
				} else {
					if (!uni.$u.test.array(value) && value !== null) {
						return uni.$u.error('非手風琴模式下，u-collapse元件的value引數必須為陣列')
					}
					this.expanded = (value || []).some(item => item == this.name)
				}
				// 設定元件的展開或收起狀態
				this.$nextTick(function() {
					this.setContentAnimate()
				})
			},

相關文章