IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

vue-awesome-swiper中的左右切换导航怎么移出来

2

1

vue相关

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="swiperBox banner-h">
            <swiper :options="swiperOption" ref="mySwiper" v-if="bannerImgs.length">
                <swiper-slide v-for="(n,index) in bannerImgs" :key="index"><a :href="n.url"><img :src="n.img" alt="" class="img-w"></a></swiper-slide>
                <!-- 分页器 -->
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>

 <swiper :options="swiperOption1" ref="mySwiper" v-if="jobNews">
                            <swiper-slide v-for="(items,index) in jobNews" :key="index">
                                <div class="imgBox" @click="searchPost (items.companyId, items.id)">
                                    <div class="img">
                                        <img :src="items.logo" alt="">
                                    </div>
                                    <div class="info">
                                        <p class="job">{{items.name}}</p>
                                        <span class="redLine"></span>
                                        <p class="netName">{{items.companyName}}</p>
                                    </div>
                                </div>
                            </swiper-slide>

                            <!-- 左右切换按钮 -->

                        </swiper>
                        <div class="swiper-button-next mySwiperBtn" slot="button-next"></div>
                    </div>

使用better-scroll时无法使用点击事件

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无

随机生成颜色（十六进制）

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var color = '#' + Math.random().toString(16).substr(-6);

手风琴的子元素

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<template>
    <div>
        <div class="management">
            <div class="management_top">萝卜多后台管理系统</div>
            <div class="management_bottom" v-for="(item,index) in menu" :key="item.name">
                <div class="m_b_line" v-show="item.show"></div>   
                <button :class="['m_b_menu',{'m_b_active':item.show}]" @click="menuShow(item,index)">
                    {{item.name}}
                    <div>
                        <div :class="[item.show ? 'm_b_pen3':'m_b_pen1']"></div>
                        <div :class="[item.show ? 'm_b_pen4':'m_b_pen2']"></div>
                    </div>
                </button>
                <button :class="['m_b_select',{'m_b_active':select.show}]" v-show="item.show" v-for="(select,index2) in item.content" @click="selectShow(select,index2)" :key="select.name">
                    {{select.name}}
                </button>
           </div>
        </div>
        <div class="account">
            <router-link to="/" replace>
                <button class="a_close"></button>
            </router-link>
            <div class="a_line"></div>
            <div class="a_font">admin</div>
            <div class="a_line"></div>
            <div class="a_font">管理员</div>
        </div>
        <div class="content">
            <router-view/>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menu: [
                {name: '后台管理', content: [{name:'模块管理',show: false}, {name:'角色管理',show: false}, {name:'密码修改',show: false}, {name:'账户管理',show: false}], show: false},
                {name: '信息管理', content: [{name:'公司列表',show: false}, {name:'职位列表',show: false}], show: false},
                {name: '内容管理', content: [{name:'Artucle列表',show: false}], show: false}
            ]
        }
    },
    methods: {
        menuShow(item,index) {
            this.menu.forEach(i => {
                if (i.show !== this.menu[index].show) {
                    i.show = false;
                }
            })
            item.show = !item.show;
        },
        selectShow(select,index2) {
            let menuOne = this.menu[0].show,
                menuTwo = this.menu[1].show,
                menuThree = this.menu[2].show;
            if (menuOne == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[0].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[0].content[index2].show = true;
            }
            else if (menuTwo == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[1].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[1].content[index2].show = true;
            }
            else if (menuThree == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[2].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[2].content[index2].show = true;
                this.$router.push('/backstage/artucle');
            }

        }
    }
}
</script>

<style scoped lang="scss">
.management {
    float: left;
    width: 250px;
    height: 100vh;
    background: #232a3a;
    .management_top {
        margin-bottom: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #4a5f6c;
        width: 100%;
        height: 50px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        line-height: 49px;
        color: #ffffff;
  }
}

.management_bottom {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    min-height: 40px;
    color: #ffffff;
    .m_b_menu {
        display: flex;
        justify-content: space-between;
        padding: 0 45px 0 60px; 
        width: 100%;
        color: #ffffff;
        line-height: 40px;
        background: url(../assets/img/pen.png) 30px 13px/16px 16px no-repeat;
        cursor: pointer;
        .m_b_pen1 {
            width: 9px;
            height: 1.5px;
            background: #ffffff;
            transform: translatey(23px) rotate(45deg);
        }
        .m_b_pen2 {
            @extend .m_b_pen1;
            transform: translatey(16.2px) rotate(-45deg) ;
        }
        .m_b_pen3 {
            @extend .m_b_pen1;
            transform: translate(0, 21px) rotate(45deg);
        }
        .m_b_pen4 {
            @extend .m_b_pen1;
            transform: translate(5.5px, 20px) rotate(135deg);
        }
        &:hover {
            background-color: #7b7f89;
        }
    }
    .m_b_line {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 40px;
        background: #ffffff;
    }
    .m_b_select {
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: #ffffff;
        background: #232a3a;
        cursor: pointer;
        &:hover {
            background-color: #7b7f89;
        }
    }
}

.m_b_active {
    background-color: #7b7f89 !important;
}

.account {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    float: right;
    width: calc(100% - 250px);
    height: 50px;
    background: #ffffff;
    .a_close {
        display: block;
        margin-right: 15px;
        width: 45px;
        height: 50px;
        background: url(../assets/img/close.png) center/14px 13.6px no-repeat;
        cursor: pointer;
        &:hover {
            background-color: #eeeeee;
        }
    }
    .a_line {
        margin: 0 10px;
        width: 1.5px;
        height: 14px;
        background: #e9e9e9;
    }
    .a_font {
        width: 67px;
        height: 100%;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        color: #337ab7;
        &:hover {
            background-color: #eeeeee;
        }
    }
}

.content {
    float: right;
    width: calc(100% - 250px);
    height: calc(100vh - 50px);
    background: #f5f5f5;
}
</style>

登陆密码账户正确后跳转路由

0

1

angular基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if(res.code === 0){
      alert("登陆成功");
      this.route.navigate(['/list']);
       console.log(res);
     } else{
       alert(res.message);
     }

   });

{
        path:'',component: LogComponent
      },
    {
        path:'list',loadChildren:'../../pages/list/list.module#ListModule'
      } ,
    
];

页面跳转传参要带上data里面的数据，可以带多个吗

0

1

小程序网络请求

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

-

登陆页面进行跳转的时候报错

0

1

Ajax

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

登陆页面进行跳转的时候报错

如何根据玩家人数在法官查看页面展示相应数量的box

0

1

节点操作

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

思路是怎样的

如何使用小程序定位解析出所在地位置

0

1

小程序语言基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

小程序关于定位有个自己三个的api  分别是 wx.getLocation  wx.chooseLocation wx.openLocation 
没有一个可以根据经纬度解析出定位
如何自己通过经纬度解析出位置

input [ type = range ]滚动条的值增减量错误。

0

1

节点操作

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="adjust">
                <p class="players">玩家人数 <input type="number" id="input" value="6" title="游戏人数为4~18人"> 人 <span class="orange">游戏人数为4~18人</span></p>
                <div class="slide clearfix">
                    <button class="minus lfloat" onclick="numMinus()"></button>
                    <input type="range" id="range" class="lfloat" name="num" min="4" max="18" value="6" title="人数范围">
                    <button class="plus lfloat" onclick="numPlus()"></button>
                </div>
            </div>

var inputValue = document.getElementById("input");
var rangeValue = document.getElementById("range");
// 给滚动条绑定“减少”事件
function numMinus () {
    rangeValue.value = rangeValue.value - 1;
    inputValue.value = rangeValue.value;
    console.log('value=' + rangeValue.value);
}
// 给滚动条绑定“增加”事件
function numPlus () {
    rangeValue.value = rangeValue.value + 1;
    inputValue.value = rangeValue.value;
    console.log('value=' + rangeValue.value);
}
// 给 input 绑定事件监听，即时改变数据
inputValue.addEventListener('input',pushValue);
rangeValue.addEventListener('input',getValue);