亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

angular.js - angular怎麼實現(xiàn)滑動切換頁面,具體效果同每日優(yōu)鮮首頁。
黃舟
黃舟 2017-05-15 17:08:45
0
3
773

1.angular怎麼實作滑動切換頁

2.

<ion-slides lass="swiper_page" options="setting.pageSwiperOptions" slider="homePageSlider" does-continue="true"
                auto-play="false" slide-interval="5000">
        <ion-slide-page ng-repeat="channel in globalData.navBarChannels">
            <ion-content lazy-scroll class='has-header' img-parent-box-height="true">
                <p  ng-if="data.narBarChannelIndex == $index">

                    <!-------------------- 文章列表(二次迭代)  ----------------------->
                    <section class="article_temp_parent"
                             ng-repeat="article in data.articlesList"
                             ng-click="$event.stopPropagation();action.toArticleDetailPage(article.id)">

                        <!-- 三張小圖 -->
                        <p class="article_template article_three_img_template" ng-if="article.temp_type == '3'">
                            <p class="header one_line_text">{{article.title || article.summary}}</p>
                            <p class="content">
                                <p class="img_content clearfix">
                                <span class="item_pic_verticle pull_left"
                                      ng-repeat="article_image in article.temp_url track by $index">
                                    <img src=""
                                         image-lazy-src="{{globalAction.imageResize(article_image,'@378w_255h_1e_1c') || 'img/default/xinshui_small_icon.jpg'}}"
                                         lazy-scroll-resize="true"
                                         class="three_img"
                                         onerror="this.src='img/default/xinshui_icon.jpg'"/>
                                </span>
                                </p>
                            </p>
                            <p class="footer">
                                <ul class="flex_box">
                                    <li class="list_sub_item"
                                        ng-click="$event.stopPropagation();action.toBigVDetailPage(article.bigv.id);">
                                        <img src=""
                                             ng-src="{{article.bigv.avatar_url || 'img/default/default_bigv_avatar_img.png'}}"
                                             onerror="this.src='img/default/default_bigv_avatar_img.png'"
                                             class="avatar_xxxs"/>
                                    </li>
                                    <li class="list_sub_item bigv_name"
                                        ng-click="$event.stopPropagation();action.toBigVDetailPage(article.bigv.id);">
                                        <p class="one_line_text">{{article.bigv.realname}}</p>
                                    </li>
                                    <li class="list_sub_item"
                                        ng-click="$event.stopPropagation();action.toBigVDetailPage(article.bigv.id);">
                                        <span class="remark_value flex_box">
                                            <var class="list_sub_item remark_value_text">言值</var>
                                            <var class="list_sub_item remark_value_count">{{article.bigv.speech_weight || '待'}}</var>
                                        </span>
                                    </li>
                                    <li class="list_sub_item">
                                        <span ng-if="article.time_show">{{article.index_time}}</span>
                                    </li>
                                </ul>
                                <!--<p class="article_time" ng-if="article.time_show">{{article.publish_on}}</p>-->
                            </p>
                        </p>
            </ion-content>
        </ion-slide-page>
    </ion-slides>
    

3.每日優(yōu)鮮的首頁截圖效果

4.不知道「每日優(yōu)鮮」使用的是什麼,切換很平滑,數(shù)據(jù)加載也很快,加載之後不知道是否使用了本地存儲,關(guān)閉網(wǎng)絡(luò),滑動切換頁面,頁面內(nèi)容依然存在。

黃舟
黃舟

人生最曼妙的風景,竟是內(nèi)心的淡定與從容!

全部回覆(3)
伊謝爾倫

angular並沒有已經(jīng)寫好的輪子給你用,不過bootstrap ui中有輪播的指令http://angular-ui.github.io/b...
另外也可以用swiper

Ty80

有輪子,標記回去給你發(fā)。


ion-slide-box 的附加指令,可將選項卡新增至幻燈片框,可從 Android Material Design 規(guī)範得知
https://github.com/JKnorr91/i...

該組件是 ionic Slidebox 的包裝。這將包含幻燈片頂部的選項卡/圖示。點擊選項卡/圖示將觸發(fā)投影片前往對應(yīng)頁面。
http://market.ionic.io/plugin...

洪濤

這是用ionic寫的吧,用就可以了

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板