左右滑动弹出弹框

2021-09-27 15:02:10 阅读：157 来源： 互联网

标签：动弹 vue -- VueTouch ite 左右出弹 touch USR

使用vue-touch步骤

npm install vue-touch@next --save

//在vue项目中的main.js文件中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

   <v-touch v-on:swiperight="onSwipeRight">
            <!--        ++++++++++++-->
            <!-- 展示弹出层< -->
            <van-popup v-model="showNavigation" position="left"
                       :style="{ height:'100%', width:'60%'}">
                <!-- 单选框组件 -->
                <Navigation></Navigation>
            </van-popup>
            <!--        +++++++++++++++++-->
            <navheader :title="title" :isLocalIcon="isLocalIcon" :leftName="leftName" :rightName="rightName"
                       @onHeaderLeft="getHeaderLeft" @onHeaderRight="getHeaderRight"></navheader>

            <!-- 外层的tab页 -->
            <van-tabs v-model="active" @click="chooseTag" swipeable color="#14C893" title-active-color="#14C893"
                      class="home-tabs">
                <van-tab v-for="(item, index) in dataList" :key="index" :title="item.TITLE"
                         :info="infoNum(item.TOTAL_NUMS)">
                    <!-- 下拉刷新页 -->
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list style="margin-bottom: 120px;" v-model="loading" :finished="finished"
                                  finished-text="没有更多了"
                                  @load="onLoad">
                            <div v-if="item.DATA.length>0">
                                <div class="home-tab" v-for="(ite, ind) in item.DATA" :key="ind" @click="goPage(ite)">
                                <span class="status-name">
                                    <span class="status-flag">{{ currentStatus(ite.ORDER_STATUS) }}</span>
                                    <span class="bold-word">{{ ite.USR_NAME }}</span>
                                </span>
                                    <span>{{ userType(ite.USER_TYPE) }} |
                                    {{ wireType(ite.DETAIL.METERS.WIRE_TYPE) }}</span>
                                    <span>户号： {{ ite.USR_NO }}</span>
                                    <span>用电地址： {{ ite.ELEC_DESC }}</span>
                                </div>
                            </div>

                            <!-- <div v-else style="width: 100%;height: 40vw;display: flex;justify-content: center;align-items: center;border: 1px red solid;">
                                <i class="iconfont icon-meiyoushuju" style="font-size: 100px;color: #777777;border: 1px red solid;"></i>
                            </div> -->

                        </van-list>
                    </van-pull-refresh>

                </van-tab>
            </van-tabs>

            <van-popup v-model="showRightCheckBox" position="right" :close-on-click-overlay="canclose"
                       :style="{ height: '100%', width: '70%' }">
                <pick-status @chooseStatus="getChildData"></pick-status>
            </van-popup>

            <!-- 待上传工单悬浮球 -->
            <float-ball></float-ball>

            <div class="demo-btn" style="display: flex;flex-wrap: wrap;">
                <button @click="dropDBZ">删除主数据库</button>
                <button @click="dropDBZS">删除主数据库</button>
            </div>
        </v-touch>

methods中

   onSwipeRight() {
            this.showNavigation = true
            console.log('right')
        },

标签：动弹,vue,--,VueTouch,ite,左右,出弹,touch,USR
来源： https://www.cnblogs.com/nwj-mm/p/15342952.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

左右滑动弹出弹框