一、引包
// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);
二、页面引用
<section class="promotion_clerk_main" :style="{'-webkit-overflow-scrolling': scrollMode}">
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
<div class="accout_item" v-for="(item,index) in promotionClerkList" :key="index">
<div class="promotion_clerk_title">文案{{index + 1}}</div>
<div class="promotion_clerk_des">
{{item.content}}
</div>
<div class="promotion_clerk_copy clerk_detail" :data-clipboard-text="item.content" @click="copy">复制文案</div>
</div>
</mt-loadmore>
</section>
import { Toast, Loadmore } from 'mint-ui'
export default {
data () {
return {
allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据
scrollMode:"auto",
}
},
components: {
'mt-loadmore': Loadmore
},
activated () {
this.getpromotionClerk() // 初始化运行
},
methods: {
loadTop () {
this.soureForm.pageIndex = 1
this.getpromotionClerk()
this.$refs.loadmore.onTopLoaded()
},
loadBottom () {
this.more()
this.$refs.loadmore.onBottomLoaded()
},
more () {
this.soureForm.pageIndex++
this.getpromotionClerk()
},
isHaveMore (HaveMore) {
this.allLoaded = true
if (HaveMore) {
this.allLoaded = false
}
},
// 获取推广文案
getpromotionClerk () {
let parm = this.soureForm
parm.sourceType = 'copywriting'
getPromotePage(JSON.stringify(parm), res => {
if (res.success) {
this.isHaveMore(res.object.hasNextPage) // 获取是否还有下一页
this.promotionClerkList = [...this.promotionClerkList, ...res.object.list]
this.$nextTick(() => {
this.scrollMode = 'touch'
})
} else {
this.promotionClerkList = []
}
})
},
}
.promotion_clerk_main {
overflow: auto;
}
Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!