宅女二二

摘要： 效果：有8个一级导航（第一张图片），点击进入后，有二级导航以及页面内容（第二三张图片）。 html结构（代码在后面）： 1 <!-- 主要内容（移动端） --> 2 <div class="col-xs col-sm hidden-md hidden-lg centerbox"> 3 <!-- 包含 阅读全文

摘要： 效果： 左侧导航结构代码：绑定id名为pcnav 右侧结构代码：绑定id名为pcson jq代码： 1 // PC端的nav切换 2 $("#pcnav>li:eq(0)").addClass('centerbox_in_disc'); // 第一个nav标红 3 $("#pcson>div").h 阅读全文

摘要： 结构：绑定id jq代码： 1 // PC端的nav切换 2 $("#pcnav>li:eq(0)").addClass('centerbox_in_disc'); // 第一个nav标红 3 $("#pcson>div").hide(); 4 $("#pcson>div:eq(0)").show( 阅读全文

摘要： 1、流式布局：百分比自适应布局 pc端可以通过设置版心来,完成不同屏幕的适配？ 移动端一般采用流式布局(百分比布局) 1. 高度定死,宽度自适应 2. 对于大的轮播图等,宽度100%自适应 3. 对于小图标挥着文本,一般都是固定宽高大小 流式布局的缺点: 对于大屏幕来说,用户体验并不是特别好,有些布 阅读全文

摘要： 效果： 在自适应PC端跟移动端的情况下，轮播图的图片在移动端显示太扁太小，所以需要截取中间的主要内容对其进行放大，图片左右留白不显示。 移动端（设置前）： 移动端（设置后）： 代码： 结构： 写样式 （放大比例136%）： .swiper-slide { width: 100%; overflow: 阅读全文

摘要： 效果： heml： <div class="index_top_in_box"> <!-- 背景 --> <div class="index_top_in_box_bg"></div> </div> css: .index_top_in_box { display: flex; flex-direc 阅读全文

摘要： 效果： 结构： JS代码： $(document).ready(function() { // 下拉菜单的显隐 $(".nav_son").hide(); $(".nav_son_box").hide(); $(".headbox_second_nav>div").hover(function(){ 阅读全文

摘要： 呈现效果： 使用插件： uni-data-picker 数据驱动的picker选择器 插件下载地址： https://ext.dcloud.net.cn/plugin?id=3796 放到对应的目录： 结构代码： 1 <!-- ↓↓↓↓ 此处使用的插件 ↓↓↓↓ --> 2 <uni-data-pi 阅读全文

摘要： 首先，结构代码加上这个： :scroll-top="scrollTop" @scroll="scroll" 然后，data数组加上这两个： scrollTop: 0, // 滚动条位置，距顶为0 oldScrollTop: 0, 在方法里面写这个： scroll (e) { //记录scroll 位 阅读全文

摘要： 效果： 结构代码： 1 <!-- 4、上传图片 --> 2 <view class="addbox1_son2"> 3 <view class="pic-box"> 4 <view class="pic-box-son" v-for="(picitem,picindex) in picArr" :k 阅读全文