ここで、vue の更新とタブの切り替えの例を共有します。これは良い参考値であり、皆さんの役に立つことを願っています。
まず、更新されたコンテンツを保持するサブコンポーネントを pull という名前で作成します (例の最後で確認できます)
次に、更新するページを参照します
<template> <p class="fbjbox container"> <p class="fbjbox1"> <tab ref='tab' :list="['推荐','热门','最新']" width="33%" @change='tabchange' style="float:left"/> <span class="price" width="33%" @tap="change" >价格<span class="mui-icon mui-icon-arrowright"></span></span> //点击价格会排序 </p> <p class="fbjbox2"> <pull up="true" down="true" @up="next" @down="shuaxin" ref="pull"> <p class="mui-row mui-col-xs-12 mui-clearfix"> <span class="mui-col-xs-6" v-href="{name:'商品详情'}" rel="external nofollow" v-for="item in list"> <p class="img"><img src="/static/imghwm/default1.png" data-src="item.goods_image" class="lazy" v-bind:/ alt="vueでリフレッシュとタブ切り替えを実装する" ></p> <h4 id="item-goods-name">{{item.goods_name}}</h4> <p class="red1">¥{{item.goods_price}}</p> </span> </p> </pull> </p> </p> </template> <style> /*选项卡的颜色*/ .tab{background:#fff;} .tab a.active{color:#D83737; border-bottom: 2px solid #D83737;} .red1{color:red;font-size:15px;padding-left:10px} h4{font-size:16px;font-weight:normal;color:#656565;padding-left:10px} </style> <style scoped> .container{font-family: "微软雅黑";} .mui-row{ overflow: hidden;margin-bottom: 20px;} .mui-row .mui-col-xs-6{width:49%;background-color:#fff;overflow: hidden;margin-top:6px;text-align: left;} .mui-row .mui-col-xs-6:nth-child(even){margin-left:2%;} .mui-row img{width:100%;} .mui-row .img{height:170px;} </style> <script> import tab from '../tab' import pull from '../public/pull' export default { created() { this.height = window.innerWidth * 40 / 64; this.is_zc = this.$route.query.is_zc == 1; this.uid = localStorage.getItem('uid'); }, mounted(){ this.shuaxin(() => { }); }, data() { return { tab:0, list:[], order:1 //order是排序。1的默认的,2从低到高,3从高到低 } }, components: {tab,pull}, computed:{ //cmd也是一个变量 ,而且根据选项卡的不同而不同 cmd:function(){ switch(this.tab){ case 0: return "Mp/goodsTuijian"; case 1: return "Mp/hotGoods"; case 2: return "Mp/newGoods"; } } }, methods: { tabchange({index, data}) { this.tab = index; }, shuaxin(done) { //首先进去以后的初始 this.$api(this.cmd, { page: 0,order:this.sort }).then(list => { //除了把页面传过去还需要把排序的方式传过去 this.list=list; done(); //跳到一个新的选项卡时,页面从新从第一个.不是拉到的那个位置 if(this.$refs.pull){ this.$refs.pull.reset(); this.$refs.pull.nodata = false; } }); }, next(done) { var page = this.list.length; this.$api(this.cmd, { page,order:this.sort }).then(list => { if (list.length == 0) { return done&&done(true);} //这个里面如果只出现done(true)的话可能就是只显示没有数据了,不会出现正在加载中 this.list = this.list.concat(list); done(); }); }, change(){ //点击价格时变化的class if(this.sort==1){this.sort=2;} else if(this.sort==2){this.sort=3;} else if(this.sort==3){this.sort=1;} this.shuaxin(() => { }); } }, watch:{ //监听。当选项卡改变的时候,刷新页面。 tab:function(){ this.shuaxin(() => { }); }, } } </script>
以下は pull サブアセンブリという名前です。
<template> <p class="mui-scroll-wrapper" ref="box" v-bind:style="{top:top+'px'}"> <p class="mui-pull-top-pocket mui-block" v-bind:class="{'mui-visibility':obj.y>0}" v-if="down"> <p class="mui-pull" v-show="flag"> <p class="mui-pull-loading mui-icon" v-bind:class="{'mui-spinner': type==2,'mui-icon-pulldown':type!=2}" v-bind:style="css1"></p> <p class="mui-pull-caption" v-if="type==0">下拉可以刷新</p> <p class="mui-pull-caption" v-if="type==1">释放立即刷新</p> <p class="mui-pull-caption" v-if="type==2">正在刷新</p> </p> </p> <p class="mui-scroll" @scrollstart.self="scrollstart" @scroll.self="scroll" @scrollbottom="scrollbottom"> <slot> <p class="no-content"> <i></i> <h4 id="暂无内容">暂无内容</h4> </p> </slot> <p class="mui-pull-bottom-pocket mui-block mui-visibility" v-if="type==4"> <p class="mui-pull"> <p class="mui-icon mui-spinner mui-visibility" style="transition: -webkit-transform 0.3s ease-in; transform: rotate(180deg); animation: spinner-spin 1s step-end infinite;position: relative;top: 8px;"></p> <p class="mui-pull-caption mui-visibility">正在加载...</p> </p> </p> <!--<p v-if="nodata" class="nodata">已经没有更多数据</p>--> <p v-if="nodata" class="yqxtsdkn"></p> </p> </p> </template> <style scoped> .mui-scroll-wrapper { position:relative;height:100%;} .nodata { color:#efefef;text-align:center;margin-top:10px;line-height: 30px; font-size: 12px; background:#0B2E4C} </style> <script> export default { mounted() { var box = this.$refs.box; this.obj = mui(box).scroll(); }, props: ["down", "up", "top"], data() { return { flag: false, Y: 0, obj: {}, type: 0, nodata: false } }, computed: { css1() { return { transition: this.type > 0 ? '-webkit-transform 0.3s ease-in' : "", transform: this.type > 0 ? 'rotate(180deg)' : "", animation: this.type == 2 ? "spinner-spin 1s step-end infinite" : "" }; } }, watch: { type(a, b) { if (b == 1) { this.type = 2; } if (a == 2) { this.flag = false; this.obj.setTranslate(0, 50); this.$emit("down", () => { this.type = 0; this.obj.setTranslate(0, 0); this.obj.reLayout(); this.nodata = false; }); } } }, methods: { reset(){ this.obj.setTranslate(0, 0); }, scrollstart() { if (this.obj.lastY <= 0) { this.flag = true; } else { this.Y = 0; this.flag = false; } }, scroll() { if (this.down && this.flag) { this.type = this.obj.y > 50 ? 1 : 0; if (this.obj.y > 0) { this.Y = this.obj.y; } } }, scrollbottom() { if (this.nodata || !this.up || this.type == 4) return; this.type = 4; this.$emit("up", (n) => { this.type = 0; if (n == true) this.nodata = true; this.obj.reLayout(); }); } } } </script>
タブの例
<template> <p class="mypage"> <p class="fbjbox"> <p class="fbjbox1"> <tab ref="tab" :list="['一级合伙人'+count,'二级合伙人']" width="50%" @change="tabchange" /> </p> <p class="fbjbox2"> <template v-if="list!=null&&tab==0"> <h4 id="一级合伙人总数-count-人">一级合伙人总数{{count}}人</h4> <ul class="mui-table-view clear"> <li class="mui-table-view-cell mui-media" v-for="item in list"> <img class="mui-media-object mui-pull-left circle lazy" src="/static/imghwm/default1.png" data-src="item.head_url" v-bind: / alt="vueでリフレッシュとタブ切り替えを実装する" > <p class="mui-media-body"> {{item.vname}} <p class='mui-ellipsis'>{{item.identity}}</p> </p> </li> </ul> </template> <template v-if="list!=null&&tab==1"> <h4 id="二级合伙人总数-count-人">二级合伙人总数{{count}}人</h4> <ul class="mui-table-view clear"> <li class="mui-table-view-cell mui-media" v-for="item,index in list"> <p class="mui-media-body" v-cloak> {{type(index)}}人数<p class="mui-pull-right">{{item}}</p> </p> </li> </ul> </template> <!--<template v-if="list==null"> <p class=" mui-text-center" style="padding: 50px;"> <span class="mui-spinner"></span> </p> </template>--> <template v-if="list==[]"> <p>暂无下线</p> </template> </p> </p> </p> </template> <style scoped=""> p{color:#807E7E} .circle{margin-top:0px} .mypage{height:100%;} .mui-table-view .mui-media-object { line-height: 45px; max-width: 45px; height: 45px; } </style> <script> import tab from "../public/tab" import pull from "../public/pull" export default { mounted() { this.changemes(); }, components: {tab,pull}, data() { return { tab:0, count:0, list: [] } }, computed:{ cmd:function(){ switch(this.tab){ case 0: return "Member/oneLevel"; case 1: return "Member/twoLevel"; } } }, methods: { type(num){ switch (~~num) { case 1: return "游客"; case 2: return "用户"; case 3: return "粉丝"; case 4: return "美人"; case 5: return "卖手"; case 6: return "合伙人"; case 7: return "加盟商"; } return "未知"; }, tabchange({index, data}) { this.tab = index; }, changemes(){ this.list=null; this.$api(this.cmd).then(list => { this.count=list.count; this.list=list.list; }); } }, watch:{ tab:function(){ this.changemes(); } } } </script>
以上が皆様の参考になれば幸いです。
関連記事:
Vue.setを使用してVueにオブジェクト属性メソッドを動的に追加する
vue2.0にはdev-serverがありません。 jsでの設定方法
以上がvueでリフレッシュとタブ切り替えを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

WebStorm Mac版
便利なJavaScript開発ツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Dreamweaver Mac版
ビジュアル Web 開発ツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
