vueナビゲーションとトップページの輪播図の実現

32788 ワード

vue-tabbar vue-slider
1.ルーティング構造図index.js
ルーティングを使用するには、まずVue-routerとuseを導入し、ルーティングを構成したvue-routerインスタンスをnewから出てきたVueインスタンスにマウントしますが、vue-cliは構成が整い、その上で開発を続けるだけでいいです.

export default new Router({
  routes: [
    {
      path:'/',
      redirect:'/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/doctor',
      component: Doctor
    },
    {
      path: '/family',
      component: Family
    },
    {
      path: '/my',
      component: My
    }
  ]
})

redirectリダイレクト、ルーティングが空の場合/homeにリダイレクトします.

2.App.vue

<template>
  <div>
      <router-view>router-view>
      <kk-tabbar>kk-tabbar>
  div>
template>

<script>
    import kkTabbar from './components/Tabbar/ktabbar.vue'
    export default {
        components:{
            kkTabbar
        }
    }
script>

<style>
style>

3.ktabbar.vue
ナビゲーションコンポーネントは下部に固定されたリストで、各リストには対応するルートが書かれており、クリックすると対応するページが切り替わります.ルーティングレベルが深い場合は、to="test 1/test 2/test 3"のように長く書く可能性があり、ルーティングを構成するjsで各ルーティングにnameを追加することを考慮します.これによりrouter-linkでは対応するnameを渡すだけでよい.

<template>
    <div class="nav" v-model="select">
        <router-link tag="div" class="tab-item" to="/home">
            <div class="tab-icon home">div>
            <span class="tab-link">  span>
        router-link>
        <router-link tag="div" class="tab-item" to="/doctor">
            <div class="tab-icon doctor">div>
            <span class="tab-link">  span>
        router-link>
        <router-link tag="div" class="tab-item" to="/family">
            <div class="tab-icon family">div>
            <span class="tab-link">    span>
        router-link>
        <router-link tag="div" class="tab-item" to="/my">
            <div class="tab-icon my">div>
            <span class="tab-link">  span>
        router-link>
    div>
template>

"text/ecmascript-6"</span>>

    export <span class="hljs-keyword">default</span> {

        create:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        },

        data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-keyword">return</span>{
                select:<span class="hljs-string">'home'</span>
            }
        },

        methods:{
        }
    }
<<span class="hljs-regexp">/script></span></code></pre> 
  <pre class="prettyprint"><code class="language-css hljs "><<span class="hljs-tag">style</span>>

    <span class="hljs-class">.nav</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> fixed</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">44</span>px</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">bottom</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">border-top</span>:<span class="hljs-value"> <span class="hljs-number">1</span>px solid lightgray</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> flex</span></span>;
    <span class="hljs-rule">}</span></span>

    <span class="hljs-class">.nav</span> <span class="hljs-class">.tab-item</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">flex</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">align-items</span>:<span class="hljs-value"> center</span></span>;<span class="hljs-rule">//       (            )

        <span class="hljs-attribute">display</span>:<span class="hljs-value"> flex</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">flex-direction</span>:<span class="hljs-value"> column</span></span>;
    <span class="hljs-rule">}</span></span>

    <span class="hljs-class">.tab-icon</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-number">4</span>px</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">14</span>px</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">18</span>px</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">background-size</span>:<span class="hljs-value"> <span class="hljs-number">14</span>px <span class="hljs-number">18</span>px</span></span>;

    <span class="hljs-rule">}</span></span>

    <span class="hljs-comment">/*  */</span>
    <span class="hljs-class">.home</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span></span></span>;
      <span class="hljs-rule">}</span></span>
    <span class="hljs-class">.router-link-active</span> <span class="hljs-class">.home</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span>
    </span></span></span>}

    <span class="hljs-comment">/*  */</span>
     <span class="hljs-class">.doctor</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span></span></span>;
       <span class="hljs-rule">}</span></span>
    <span class="hljs-class">.router-link-active</span> <span class="hljs-class">.doctor</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span>
    </span></span></span>}
    <span class="hljs-comment">/*    */</span>
    <span class="hljs-class">.family</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span></span></span>;
      <span class="hljs-rule">}</span></span>
    <span class="hljs-class">.router-link-active</span> <span class="hljs-class">.family</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span>
    </span></span></span>}

    <span class="hljs-comment">/*  */</span>
    <span class="hljs-class">.my</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span></span></span>;
       <span class="hljs-rule">}</span></span>
    <span class="hljs-class">.router-link-active</span> <span class="hljs-class">.my</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background-image</span>:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"../../assets/tabbar/[email protected]"</span>)</span>
    </span></span></span>}

    <span class="hljs-class">.tab-link</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-number">2</span>px</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> gray</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">12</span>px</span></span>;
    <span class="hljs-rule">}</span></span>

    <span class="hljs-class">.router-link-active</span> <span class="hljs-class">.tab-link</span><span class="hljs-rules">{
        <span class="hljs-comment">/*border-bottom 2px solid #50d2c2*/</span>
        <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#85d1ff</span></span></span>;
    <span class="hljs-rule">}</span></span></code></pre> 
  <p>4.home</p> 
  <p>        vue-awesome-swiper</p> 
  <p>  : npm install vue-awesome-swiper –save</p> 
  <p> main.js        </p> 
  <pre class="prettyprint"><code class="language-javascript hljs ">import VueAwesomeSwiper from <span class="hljs-string">'vue-awesome-swiper'</span>
Vue.use(VueAwesomeSwiper)</code></pre> 
  <p>                ，         </p> 
  <p>     slider.vue  .</p> 
  <p><strong>  :</strong>       slider.css </p> 
  <pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">template</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-box"</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"swiperBox"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">swiper</span> <span class="hljs-attribute">:options</span>=<span class="hljs-value">"swiperOption"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-container"</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">"mySwiper"</span>></span>
            <span class="hljs-comment"><!--     --></span>      
            <span class="hljs-tag"><<span class="hljs-title">swiper-slide</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">"banner in banners"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">:src</span>=<span class="hljs-value">"banner"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-image"</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">swiper-slide</span>></span>
            <span class="hljs-comment"><!--        --></span>
            <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-pagination"</span> <span class="hljs-attribute">slot</span>=<span class="hljs-value">"pagination"</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">swiper</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">template</span>></span></code></pre> 
  <pre class="prettyprint"><code class="language-javascript hljs "><script>
    import { swiper, swiperSlide } from <span class="hljs-string">'vue-awesome-swiper'</span>
    export <span class="hljs-keyword">default</span> {
        data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
            <span class="hljs-keyword">return</span> {
            }
        },
        props:{
            banners:{
              type:<span class="hljs-built_in">Array</span>
          },
            swiperOption:{
            }
        },
        components:{
            swiper:swiper,
            swiperSlide:swiperSlide
        },
        <span class="hljs-comment">//    sweiper  </span>
        computed: {
            swiper:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.$refs.mySwiper.swiper;
            }
        },
    }
<<span class="hljs-regexp">/script></span></code></pre> 
  <pre class="prettyprint"><code class="language-css hljs "><<span class="hljs-tag">style</span>>
    <span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"swiper.css"</span></span>;
    <span class="hljs-class">.swiper-box</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">180</span>px</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> auto</span></span>;
    <span class="hljs-rule">}</span></span>
    <span class="hljs-class">.swiper-box</span> <span class="hljs-class">.swiper-container</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
    <span class="hljs-rule">}</span></span>
    <span class="hljs-class">.swiper-box</span> <span class="hljs-class">.swiper-box</span> <span class="hljs-tag">img</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
    <span class="hljs-rule">}</span></span>
</<span class="hljs-tag">style</span>></code></pre> 
  <p>      import       </p> 
  <pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">template</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"home2"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">k-slider</span> <span class="hljs-attribute">:banners</span>=<span class="hljs-value">"banners"</span> <span class="hljs-attribute">:swiperOption</span>=<span class="hljs-value">"swiperOption"</span>></span><span class="hljs-tag"></<span class="hljs-title">k-slider</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">template</span>></span></code></pre> 
  <pre class="prettyprint"><code class="language-javascript hljs "><script>
    import Slider from <span class="hljs-string">'../Common/Swiper/swiper.vue'</span>
    export <span class="hljs-keyword">default</span> {
        data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
          <span class="hljs-keyword">return</span>{
              banners:[
                  <span class="hljs-string">'https://img-blog.csdn.net/20171016160652522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHZsZW1v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center'</span>,
                  <span class="hljs-string">'https://img-blog.csdn.net/20171016160701668?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHZsZW1v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center'</span>
              ],
              swiperOption:{
                  direction:<span class="hljs-string">'horizontal'</span>,
                  loop:<span class="hljs-literal">true</span>,
                  autoplay:<span class="hljs-number">1000</span>,
                  paginationType:<span class="hljs-string">'fraction'</span>,
                  pagination:<span class="hljs-string">'.swiper-pagination'</span>
              }
          }
        },
        components:{
            kSlider :Slider
        }
    }
<<span class="hljs-regexp">/script></span></code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1293459049211305984"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">

興味があるかもしれません

行列求逆(JAVA)利用に伴う行列
qiuwanchi
伴う行列を利用して逆行列を求める

Singletonモード
aoyouzi
単一の例を選択します。 Singleton

[オープンソースと自主研究開発]簡単に外部の技術サポートを受けることができても、自分で研究開発しなければならない。
comsci
オープンソース

ページには2つのframeがあり、1つのリンクをクリックして別の内容を変更する方法
Array_06
UI XHTML

Struts 2は単一/複数のファイルのアップロードとダウンロードを実現
oloz
ファイルのアップロード struts

10個のオンラインロゴデザインのウェブサイトを推薦します
362217990
logo

jspアップロードファイル
香水が濃い
jsp fileupload

マイアーキテクチャ経験シリーズ記事-フロントエンドアーキテクチャ
agevs
JavaScript Web フレーム UI jQuer

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号

vuexの詳細

vueでのv-text/v-htmlの使用例コードの詳細