The following is a summary of the mint-ui mobile terminal drop-down loading practices.

The following is a summary of the mint-ui mobile terminal drop-down loading practices.

1. npm I mint-ui-S

2. import 'mint-ui/lib/style.css 'in main. js'

3. The following is the code structure:

<Template> <div class = "main-body": style = "{'-webkit-overflow-scrolling': scrollMode}"> <v-loadmore: bottom-method = "loadBottom": bottom-all-loaded = "allLoaded ": auto-fill = "false" ref = "loadmore"> <ul class = "list"> <li v-for = "(item, index) in proCopyright "> <div >{{ item. FZD_ZPMC }}</div> </li> </ul> </v-loadmore> </div> </template> <script> import {Loadmore} from 'mint- ui '; export default {components: {'v- Loadmore ': Loadmore,}, data () {return {pageNo: 1, pageSize: 50, proCopyright: [], allLoaded: false, // whether the property can be pulled up, if it is set to false, data can be pulled up. If it is set to true, data cannot be loaded up. scrollMode: "auto", // The mobile terminal can be scaled elastically. touch indicates auto-scrolling, auto is a non-auto-scrolling totalpage: 0, loading: false, bottomText: '', }}, mounted () {this. loadPageList (); // The first access query list}, methods: {loadBottom: function () {// load this. more (); // this. $ refs. loadmore. onBottomLoaded (); // fixed Method. Call this operation once after the query is completed for relocating.}, loadPageList: function () {// query data this. axios. get ('/copyright? Key = '+ encodeURIComponent ('Company name') + "& mask = 001" + "& page =" + this. pageNo + "& size =" + this. pageSize ). then (res => {console. log (res); this. proCopyright = res. data. result. PRODUCTCOPYRIGHT; this. totalpage = Math. ceil (res. data. result. COUNTOFPRODUCTCOPYRIGHT/this. pageSize); if (this. totalpage = 1) {this. allLoaded = true;} this. $ nextTick (function () {// whether there is a next page. Add a method to judge whether there is any next page to prohibit this. scrollMode = "touch"; this. is HaveMore () ;}) ;}, more: function () {// paging query if (this. totalpage = 1) {this. pageNo = 1; this. allLoaded = true;} else {this. pageNo = parseInt (this. pageNo) + 1; this. allLoaded = false;} console. log (this. pageNo); this. axios. get ('/copyright? Key = '+ encodeURIComponent ('Company name') + "& mask = 001" + "& page =" + this. pageNo + "& size =" + this. pageSize ). then (res => {this. proCopyright = this. proCopyright. concat (res. data. result. PRODUCTCOPYRIGHT); console. log (this. proCopyright); this. isHaveMore () ;}) ;}, isHaveMore: function () {// whether there is a next page. If not, refresh the page by pulling it. // this. allLoaded = false; // true indicates that if (this. pageNo = this. totalpage) {this. allLoaded = true ;}},}</script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped> li {padding: 30px 0; background-color: # ccc; margin-bottom: 20px ;} </style>

In combination with the mint-ui mobile terminal pull-down loading practice, the summary is all the content shared by Alibaba Cloud mini-editor. I hope to give you a reference and support for the customer's house.