一、有异步获取数据时 滑动创建时机page/shop/info/info.vue
1)有异步数据时要监视数据变动之后再刷新
<script>
import {mapState} from 'vuex'
import BScrool from '@better-Scroll/core'
export default{
mounted(){
if(!this.info.pics) {
return
}
this._initScroll()
},
computed:{
...mapState(['info'])
},
watch:{
info(){
this.$nextTick(()=>{
this._initScroll()
})
}
},
methods:{
_initScroll(){
new BScrool('.shop-info')
const ul = this.$refs.picsUl
const liWidth = 120
const space = 6
const count = this.info.pics.length
ul.style.width = (liWidth + space) * count -space + 'px'
new BScrool('.pic-wrapper',{
scrollX:true
})
}
}
}
</script>
附件:完整代码
<template>
<div class="shop-info">
<div class="info-content">
<section class="section">
<h3 class="section-title">配送信息</h3>
<div class="delivery">
<div>
<span class="delivery-icon">{{info.description}}</span>
<span>由商家配送提供配送,约 {{info.deliveryTime}} 分钟送达,距离 {{info.distance}}</span>
</div>
<div class="delivery-money">配送费¥{{info.deliveryPrice}}</div>
</div>
</section>
<div class="split"></div>
<section class="section">
<h3 class="section-title">活动与服务</h3>
<div class="activity">
<!-- 【活动标签样式2】:根据数据的type显示对应的样式 -->
<div class="activity-item"
v-for="(support,index) in info.supports"
:class="activeStyle[support.type]">
<span class="content-tag">
<span class="mini-tag">{{support.name}}</span>
</span>
<span class="activity-content">{{support.content}}</span>
</div>
</div>
</section>
<div class="split"></div>
<section class="section">
<h3 class="section-title">商家实景</h3>
<div class="pic-wrapper">
<ul class="pic-list" ref="picsUl">
<li class="pic-item" v-for="(pic,index) in info.pics">
<img width="120" height="90"
:src="pic"/>
</li>
</ul>
</div>
</section>
<div class="split"></div>
<section class="section">
<h3 class="section-title">商家信息</h3>
<ul class="detail">
<li><span class="bold">品类</span> <span>{{info.category}}</span></li>
<li><span class="bold">商家电话</span> <span>{{info.phone}}</span></li>
<li><span class="bold">地址</span> <span>{{info.address}}</span></li>
<li><span class="bold">营业时间</span> <span>{{info.workTime}}</span></li>
</ul>
</section>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import BScrool from '@better-Scroll/core'
export default{
data(){
return{
activeStyle:['activity-green','activity-red','activity-orange']
}
},
mounted(){
if(!this.info.pics) {
return
}
this._initScroll()
},
computed:{
...mapState(['info'])
},
watch:{
info(){
this.$nextTick(()=>{
this._initScroll()
})
}
},
methods:{
_initScroll(){
new BScrool('.shop-info')
const ul = this.$refs.picsUl
const liWidth = 120
const space = 6
const count = this.info.pics.length
ul.style.width = (liWidth + space) * count -space + 'px'
new BScrool('.pic-wrapper',{
scrollX:true
})
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../../common/stylus/mixins.styl"
.shop-info
position: absolute
top: 195px
bottom: 0
left: 0
width: 100%
background: #fff;
overflow: hidden
.section
padding 16px 14px 14px
font-size 16px
background-color #fff
color #666
border-bottom 1px solid #eee
position relative
.section-title
color #000
font-weight 700
line-height 16px
> .iconfont
float right
color #ccc
.delivery
margin-top 16px
font-size 13px
line-height 18px
.delivery-icon
width 55px
font-size 11px
margin-right 10px
display inline-block
text-align center
color #fff
background-color #0097ff
padding 1px 0
border-radius 4px
.delivery-money
margin-top 5px
.activity
margin-top 16px
.activity-item
margin-bottom 12px
display flex
font-size 13px
align-items center
&.activity-green
.content-tag
background-color rgb(112, 188, 70)
&.activity-red
.content-tag
background-color rgb(240, 115, 115)
&.activity-orange
.content-tag
background-color: rgb(241, 136, 79)
.content-tag
display inline-block
border-radius 2px
width 36px
height: 18px
margin-right 10px
color #fff
font-style normal
position relative
.mini-tag
position absolute
left 0
top 0
right -100%
bottom -100%
font-size 24px
transform scale(.5)
transform-origin 0 0
display flex
align-items center
justify-content center
.pic-wrapper
width: 100%
overflow: hidden
margin-top 16px
.pic-list
white-space: nowrap
font-size: 0
width 100%
.pic-item
display: inline-block
margin-right: 6px
width: 120px
height: 90px
&:last-child
margin: 0
.detail
margin-bottom -16px
> li
display flex
justify-content space-between
align-items center
margin-right -10px
padding 16px 12px 16px 0
line-height 16px
bottom-border-1px(#ddd)
font-size 13px
> .bold
font-weight 700
color #333
&:last-child
border-none()
.split
width: 100%
height: 16px
border-top: 1px solid rgba(7, 17, 27, 0.1)
border-bottom: 1px solid rgba(7, 17, 27, 0.1)
background: #f3f5f7
</style>