无法垂直滚动，update是有触发的，但是触发前后的高度是一样的……

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

<template>
  <div class="home">
    <header class="g-header-container">
      <home-header></home-header>
    </header>
    <me-scroll :data="recommends">
      <home-slider />
      <home-nav />
      <home-recommend @loaded="getRecommends" />
    </me-scroll>
    <div class="g-backtop-container"></div>
    <router-view></router-view>
  </div>
</template>
 
<script>
  import HomeHeader from './header';
  import HomeSlider from './slider';
  import MeScroll from 'base/scroll';
  import HomeNav from './nav';
  import HomeRecommend from './recommend';
 
  export default {
    name: 'Home',
    components: {
      HomeHeader,
      HomeSlider,
      MeScroll,
      HomeNav,
      HomeRecommend
    },
    data() {
      return {
        recommends: []
      };
    },
    methods: {
      getRecommends(recommends) {
        this.recommends = recommends;
      },
      updateScroll() {
 
      }
    }
  };
 
</script>
 
<style lang='scss' scoped>
  @import '~assets/scss/mixins';
 
  .home {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: $bgc-theme;
  }
 
</style>
 
 
<!-- 组件说明 -->
<template>
  <div class='recommend'>
    <h3 class="recommend-title">热卖推荐</h3>
    <div class="loading-container" v-if="!recommends.length">
      <me-loading inline />
    </div>
    <ul class="recommend-list" v-if="recommends.length">
      <li class="recommend-item" v-for="(item,index) in recommends" :key=index>
        <router-link class="recommend-link" :to="{name:'home-product',params:{id:item.baseinfo.itemId}}">
          <p class="recommend-pic"><img class="recommend-img" :src="item.baseinfo.picUrlNew"></p>
          <p class="recommend-name">{{item.name.shortName}}</p>
          <p class="recommend-origPrice"><del>¥{{item.price.origPrice}}</del></p>
          <p class="recommend-info">
            <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>
            <span class="recommend-count">{{item.remind.soldCount}}件已售</span>
          </p>
        </router-link>
      </li>
    </ul>
  </div>
</template>
 
<script>
  import {
    getHomeRecommend
  } from 'api/home';
  import MeLoading from 'base/loading';
 
  export default {
    name: 'HomeRecommend',
    components: {
      MeLoading
    },
    data() {
      return {
        recommends: [],
        curPage: 1,
        totalpage: 1
      };
    },
    methods: {
      updata() {
        return this.getRecommend();
      },
      getRecommend() {
        if (this.curPage > this.totalpage) {
          return Promise.reject(new Error('没有更多了'));
        }
        getHomeRecommend(this.curPage).then(data => {
          return new Promise(resolve => {
            if (data) {
              this.curPage++;
              this.totalpage = data.totalPage;
              this.recommends = this.recommends.concat(data.itemList);
              this.$emit('loaded', this.recommends);
              resolve();
            }
          })
        });
      }
    },
    created() {
      this.getRecommend();
    }
  }
 
</script>
 
<style lang='scss' scoped>
  @import "~assets/scss/mixins";
 
  .recommend {
    &-title {
      position: relative;
      width: 100%;
      padding: 10px 0;
      font-size: $font-size-l;
      text-align: center;
 
      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background-color: #ddd;
      }
 
      &:before {
        left: 0;
      }
 
      &:after {
        right: 0;
      }
    }
 
    &-list {
      @include flex-between();
      flex-wrap: wrap;
    }
 
    &-item {
      width: 49%;
      background-color: #fff;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
      margin-bottom: 8px;
    }
 
    &-link {
      display: block;
    }
 
    &-pic {
      position: relative;
      width: 100%;
      padding-top: 100%;
      margin-bottom: 5px;
    }
 
    &-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
 
    &-name {
      height: 36px;
      padding: 0 5px;
      margin-bottom: 8px;
      line-height: 1.5;
      @include multiline-ellipsis();
    }
 
    &-origPrice {
      padding: 0 5px;
      margin-bottom: 8px;
      color: #ccc;
    }
 
    &-info {
      @include flex-between();
      padding: 0 5px;
      margin-bottom: 8px;
    }
 
    &-price {
      color: #e61414;
    }
 
    &-price-num {
      font-size: 20px;
    }
 
    &-count {
      color: #999;
    }
  }
 
  .loading-container {
    padding-top: 100px;
  }
 
</style>
 
 
<!-- 组件说明 -->
<template>
  <swiper :options='swiperOption' ref="mySwiper">
    <swiper-slide>
      <slot></slot>
    </swiper-slide>
    <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
  </swiper>
</template>
 
<script>
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper';
 
  export default {
    name: 'MeScroll',
    components: {
      swiperSlide,
      swiper
    },
    props: {
      scrollbar: {
        type: Boolean,
        default: true
      },
      data: {
        type: [Array, Object]
      }
    },
    data() {
      return {
        swiperOption: {
          direction: 'vertical',
          sliderPerView: 'auto',
          freeMode: true,
          setWrapperSize: true,
          scrollbar: {
            el: this.scrollbar ? '.swiper-scrollbar' : null,
            hide: true
          }
        }
      };
    },
    watch: {
      data() {
        this.update();
      }
    },
    mounted() {
      console.log(this.$refs.mySwiper.swiper.height);
 
    },
    methods: {
      update() {
        console.log(this.data);
        console.log(this.$refs.mySwiper.swiper.$wrapperEl.css('height'));
        setTimeout(() => {
          this.$refs.mySwiper && this.$refs.mySwiper.swiper.update();
          console.log(this.$refs.mySwiper.swiper.$wrapperEl.css('height'));
        }, 8000);
      }
    }
  }
 
</script>
 
<style lang='scss' scoped>
  .swiper-container {
    overflow: hidaden;
    width: 100%;
    height: 100%;
  }
 
  .swiper-slide {
    height: auto;
  }
 
</style>

阿克婭 2020-03-18

源自：实战：Vue webAPP首页开发 4-4 更新滚动条和图片的懒加载

收起

3回答

好帮手慕星星 2020-03-19 10:31:38

同学你好，自己能够找到问题并解决是很棒的哦！

祝学习愉快！

收起回答

好帮手慕星星 2020-03-18 14:12:28

同学你好，这段是base/slider组件中的代码

并不是scroll组件中的哦，建议再检查一下，然后把代码粘贴上来。

祝学习愉快！

收起回答

提问者阿克婭 #1

 <template> <swiper :options="swiperOption"> <slot></slot> <div class="swiper-pagination" v-if="pagination" slot="pagination"></div> </swiper> </template> 额，base/swiper的代码是这样的。我之前贴的确实是base/scroll的代码啊，和下载的源码比较，只是和课程进度一样，没有实现后续课程scroll（）去监听滚动而已……

2020-03-18 15:01:05
好帮手慕星星回复提问者阿克婭 #2

你好，老师在私信中进行了回复，可以查看一下哦。

2020-03-18 18:46:11
提问者阿克婭 #3

找到原因了……swiper的配置项sliderPerView写错了，应该是slidesPerView

2020-03-19 08:18:18