ホームページ >ウェブフロントエンド >jsチュートリアル >vueでのmint-uiの使い方を詳しく解説
今回は vue での mint-ui の使い方について詳しく説明します。 vue で mint-ui を使用する際の 注意点 について、実際の事例を見てみましょう。
vueでのmint-uiの使い方は参考までに。具体的な内容は以下の通りです
まず、mint-uiの中国語ドキュメントを載せておきます
最近mint-uiを使っていて、いくつかのプラグインがあることに気づきました。 -ins の説明があまり詳細ではないため、使用されているコードが見つからない場合があります。 github での共有にはすべてのマークダウン ファイルが含まれており、その内容はたまたま私自身が使用しているオンライン ドキュメントです。オンラインで見つけられる情報はあまり詳細ではないので、自分で書きます。
更新し続けてください...うーん、大丈夫です、私はとても怠け者です。他の人にも役立つことを願っています。
mint-uiの機能をご紹介します
機能の紹介1.セルの使い方
まずは画像を投げましょう↓<mt-cell title="开关状态"> <mt-switch v-model="openValue" @change="changeStatus"></mt-switch> </mt-cell>セルレイアウトを使用し、スイッチと組み合わせます。次の結果が得られます。
2. 無限スクロールとNavbarを併用しますNavbarはこんな感じ↓
埋め込む無限スクロールを入れます内側
< mt-tab-container-item id="1">すると効果が出てきます。
ただの紫です。 rreee
基本ページが表示されます。
小さな問題は、これがページであり、スクロール バーが共有されていることです。つまり、タブ 1 で数ページのデータを抽出してからタブ 2 に移動すると、スクロール バーの位置は変化せず、タブ 2 のコンテンツが多くのページのデータから抽出されます。タブのデータが少ない場合、他のタブのデータ読み込みに影響します。
この問題を長い間探した結果、ついに簡単な解決策を見つけました。 Infinite-Scroll に
v-if=selected == idを追加し、Infinite-scroll をタブの ID および selected と組み合わせ、選択された selected が ID に対応する場合にのみ、対応する Infinite-Scroll を実行します。
Infinite-Scrollのコードは次のとおりです:<mt-navbar v-model="selected" > <mt-tab-item id="1">选项一</mt-tab-item> <mt-tab-item id="2">选项二</mt-tab-item> </mt-navbar> <mt-tab-container v-model="selected"> <mt-tab-container-item id="1"> <p v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="content" > </p> </mt-tab-container-item> <mt-tab-container-item id="2"> <p v-infinite-scroll="loadMoreReceive" infinite-scroll-disabled="loadingReceive" infinite-scroll-distance="10" class="content" > </p> </mt-tab-container-item> </mt-tab-container>必要に応じてv-if条件を変更します。
v-infinite-scroll にバインドされたメソッドは、vue がマウントされた後、before
の前に初めて実行され、個別に呼び出す必要はありません。 3.ピッカー、3レベルのアドレス連携这里有个很简洁的三级联动,之前要用的时候没找到。自己写的一个,好麻烦。先放图
首先获取地址
getRegion(){ var root=this; <!-- 通过/region 接口获取三级地址,然后存入regionArr --> http.get("/region").then(function (data) { root.regionArr=data.data.data; <!-- 存放省 --> for(var i=0;i<root.regionArr.length;i++){ root.region_province[i]=root.regionArr[i].value; } <!-- 存放市 --> for(var i=0;i<root.regionArr[0].children.length;i++){ root.region_city[i]=root.regionArr[0].children[i].value; } <!-- 存放区 --> for(var i=0;i<root.regionArr[0].children[0].children.length;i++){ root.region_zone[i]=root.regionArr[0].children[0].children[i].value; } root.region=[ { flex: 1, values: root.region_province, textAlign: 'left', className:'picker_Slot' }, { pider: true, content: '-', className: 'slot2' }, { flex: 1, values: root.region_city, textAlign: 'center', className:'picker_Slot' }, { pider: true, content: '-', className: 'slot2' }, { flex: 1, values: root.region_zone, textAlign: 'right', className:'picker_Slot' } ] }); },
然后设置三级地址
onValuesChange(picker, values) { var root=this; var str_1=[]; var str_2=[]; for(var i in root.regionArr){ // 获取省,并重置市级名称 if(root.regionArr[i].value == values[0]){ for(var j in root.regionArr[i].children){ str_1.push(root.regionArr[i].children[j].value); // 获取市级,并重置区级的名称 if(root.regionArr[i].children[j].value == values[1]){ // 当市级下不存在区名市,置空。 if(root.regionArr[i].children[j].children != null){ for(var k in root.regionArr[i].children[j].children){ str_2.push(root.regionArr[i].children[j].children[k].value); } }else{ str_2.push(" "); } } } picker.setSlotValues(1, str_1); picker.setSlotValues(2, str_2); } } // 赋值,初始时置为上一页返回的值 root.$set(root.printerMessage,'province',values[0] == null ? root.printerMessage.province : values[0]); root.$set(root.printerMessage,'city',values[1] == null ? root.printerMessage.city : values[1]); root.$set(root.printerMessage,'area',values[2] == null ? root.printerMessage.area : values[2]); }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上がvueでのmint-uiの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。