无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-08-22 06:41 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

左侧二级菜单显示与隐藏切换的实例代码,css基

vue.js 左侧二级菜单显示与隐藏切换的实例代码,vue.js实例

废话不多说了,直接给大家贴代码了,

完整代码:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>vue点击切换显示隐藏</title> 
  <script src="http://www.xiaoyawx.com/uploads/allimg/190822/064143JH-0.jpg"></script> 
  <style type="text/css"> 
  *{ 
    padding: 0; 
    margin: 0; 
    font-size: 14px; 
  } 
  ul{ 
    width: 200px; 
    height: auto; 
  } 
  h2{ 
    background: green; 
    border: 1px solid #fff; 
    color: #fff; 
    height: 30px; 
    line-height: 30px; 
    text-indent: 24px; 
  } 
  h3{ 
    background: #999; 
    height: 24px; 
    line-height: 24px; 
    border: 1px solid #fff; 
    text-indent: 50px; 
  } 
  </style> 
</head> 
<body> 
  <div id="example"> 
    <ul> 
      <li v-for="item in items"> 
        <h2 @click="showToggle(item)">{{item.name}}</h2> 
        <ul v-show="item.isSubShow"> 
          <li v-for="subItem in item.subItems"> 
            <h3>{{subItem.name}}</h3> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
  <script type="text/javascript"> 
  new Vue({ 
    el:"#example", 
    data:{ 
      items:[ 
        { 
          name:'家用电器', 
          isSubShow:false, 
          subItems:[ 
            { 
              name:'笔记本电脑' 
            }, 
            { 
              name:'台式电脑' 
            }, 
            { 
              name:'电视机' 
            } 
          ] 
        }, 
        { 
          name:'服装', 
          isSubShow:false, 
          subItems:[ 
            { 
              name:'男士服装' 
            }, 
            { 
              name:'女士服装' 
            }, 
            { 
              name:'青年服装' 
            } 
          ] 
        } 
      ] 
    }, 
    methods:{ 
      showToggle:function(item){ 
        item.isSubShow = !item.isSubShow 
      } 
    } 
  }) 
  </script> 
</body> 
</html> 

以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐藏切换的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

左侧二级菜单显示与隐藏切换的实例代码,vue.js实例 废话不多说了,直接给大家贴代码了, 完整代码: !DOCTYPE html html head meta charse...

2.2.1 基础选择器

◆标签选择器

  标签{属性:值;}

特点:标签选择器定义之后,会将页面所有的元素都执行这个标签样式。

图片 1

 

★颜色的显示方式

  ◎直接写颜色的名称

  ◎十六进制显示颜色 0—9 a—f

#000000; 前2位代表红色(R),中间2位代表绿色(G),后边2位代表蓝色(B)。PS:值越接近0颜色越深,相同值时写3个即可 #eeeeee =#eee

  ◎rgb      color: rgb(140,49,50);

  ◎rgba     color: rgb(140,49,238);    

           a代表alpha 不透明度值 0-1       PS:0为不透明  1为100%透明   0.5 半透明

 

◆类选择器(重点)

  类选择器,是对HTML标签中class属性进行选择。CSS类选择器的选择符是 “.“ 类选择器在css样式编码中是最常用到的

  写法   .自定义类名{属性:值;  属性:值;}

图片 2

 

特点: 谁调用,谁生效。

       一个标签可以调用多个类选择器。

    多个标签可以调用同一个类选择器。

 

 ★类选择器命名规则

  不能用纯数字或者数字开头来定义类名;

  不能使用特殊符号或者特殊符号开头(_除外)来定义类名;

  不建议使用汉字来定义类名;

  不推荐使用属性或者属性的值来定义类名;

 页面布局常见命名规范

图片 3

◆ID选择器

  ID选择器和类选择器用法一样,区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器,浏览器不会报错但是不符合W3C标准了,JS调用会出问题,所以ID选择器命名必须要唯一性)

写法    #自定义名称{属性:值;}

图片 4

特点:   一个ID选择器在一个页面只能调用一次。

    一个标签只能调用一个ID选择器。

    一个标签可以同时调用类选择器和ID选择器

 

◆通配符选择器

通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

  *{属性:值;}

特点:给所有的标签都使用相同的样式。

★不推荐使用,增加浏览器和服务器负担。

微信小程序 侧滑删除(左滑删除),小程序

微信小程序 侧滑删除(左滑删除)

图片 5

如图所示,demo是小程序的侧滑删除,这个是我在别人写的例子的基础上修改的。代码如下

js文件代码:

// pages/leftSwiperDel/index.js 

var initdata = function (that) { 
 var list = that.data.list 
 for (var i = 0; i < list.length; i  ) { 
  list[i].txtStyle = "" 
 } 
 that.setData({ list: list }) 
} 

Page({ 
 data: { 
  delBtnWidth: 180,//删除按钮宽度单位(rpx) 
  list: [ 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtStyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 

  ] 
 }, 
 onLoad: function (options) { 
  // 页面初始化 options为页面跳转所带来的参数 
  this.initEleWidth(); 
 }, 
 onReady: function () { 
  // 页面渲染完成 
 }, 
 onShow: function () { 
  // 页面显示 
 }, 
 onHide: function () { 
  // 页面隐藏 
 }, 
 onUnload: function () { 
  // 页面关闭 
 }, 
 touchS: function (e) { 
  if (e.touches.length == 1) { 
   this.setData({ 
    //设置触摸起始点水平方向位置 
    startX: e.touches[0].clientX 
   }); 
  } 
 }, 
 touchM: function (e) { 
  var that = this 
  initdata(that) 
  if (e.touches.length == 1) { 
   //手指移动时水平方向位置 
   var moveX = e.touches[0].clientX; 
   //手指起始点位置与移动期间的差值 
   var disX = this.data.startX - moveX; 
   var delBtnWidth = this.data.delBtnWidth; 
   var txtStyle = ""; 
   if (disX == 0 || disX < 0) {//如果移动距离小于等于0,文本层位置不变 
    txtStyle = "left:0px"; 
   } else if (disX > 0) {//移动距离大于0,文本层left值等于手指移动距离 
    txtStyle = "left:-"   disX   "px"; 
    if (disX >= delBtnWidth) { 
     //控制手指移动距离最大值为删除按钮的宽度 
     txtStyle = "left:-"   delBtnWidth   "px"; 
    } 
   } 
   //获取手指触摸的是哪一项 
   var index = e.target.dataset.index; 
   var list = this.data.list; 
   list[index].txtStyle = txtStyle; 
   //更新列表的状态 
   this.setData({ 
    list: list 
   }); 
  } 
 }, 

 touchE: function (e) { 
  if (e.changedTouches.length == 1) { 
   //手指移动结束后水平位置 
   var endX = e.changedTouches[0].clientX; 
   //触摸开始与结束,手指移动的距离 
   var disX = this.data.startX - endX; 
   var delBtnWidth = this.data.delBtnWidth; 
   //如果距离小于删除按钮的1/2,不显示删除按钮 
   var txtStyle = disX > delBtnWidth / 2 ? "left:-"   delBtnWidth   "px" : "left:0px"; 
   //获取手指触摸的是哪一项 
   var index = e.target.dataset.index; 
   var list = this.data.list; 
   list[index].txtStyle = txtStyle; 
   //更新列表的状态 
   this.setData({ 
    list: list 
   }); 
  } 
 }, 
 //获取元素自适应后的实际宽度 
 getEleWidth: function (w) { 
  var real = 0; 
  try { 
   var res = wx.getSystemInfoSync().windowWidth; 
   var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应 
   // console.log(scale); 
   real = Math.floor(res / scale); 
   return real; 
  } catch (e) { 
   return false; 
   // Do something when catch error 
  } 
 }, 
 initEleWidth: function () { 
  var delBtnWidth = this.getEleWidth(this.data.delBtnWidth); 
  this.setData({ 
   delBtnWidth: delBtnWidth 
  }); 
 }, 
 //点击删除按钮事件 
 delItem: function (e) { 
  var that = this 
  wx.showModal({ 
   title: '提示', 
   content: '是否删除?', 
   success: function (res) { 
    if (res.confirm) { 
     //获取列表中要删除项的下标 
     var index = e.target.dataset.index; 
     var list = that.data.list; 
     //移除列表中下标为index的项 
     list.splice(index, 1); 
     //更新列表的状态 
     that.setData({ 
      list: list 
     }); 
    } else { 
     initdata(that) 
    } 
   } 
  }) 

 } 

}) 

wxss文件代码:

/* pages/leftSwiperDel/index.wxss */ 
view{ 
  box-sizing: border-box; 
} 
.item-box{ 
  width: 700rpx; 
  margin: 0 auto; 
  padding:40rpx 0; 
} 
.items{ 
  width: 100%; 
} 
.item{ 
  position: relative; 
  border-top: 2rpx solid #eee; 
  height: 120rpx; 
  line-height: 120rpx; 
  overflow: hidden; 
} 
.item:last-child{ 
  border-bottom: 2rpx solid #eee; 
} 
.inner{ 
  position: absolute; 
  top:0; 
} 
.inner.txt{ 
  background-color: #fff; 
  width: 100%; 
  z-index: 5; 
  padding:0 10rpx; 
  transition: left 0.2s ease-in-out; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
} 
.inner.del{ 
  background-color: #e64340; 
  width: 180rpx;text-align: center; 
  z-index: 4; 
  right: 0; 
  color: #fff 
} 
.item-icon{ 
  width: 64rpx; 
  vertical-align: middle; 
  margin-right: 16rpx 
} 
.thumb{ 
  width: 200px; 
  height: 200px; 
  -webkit-overflow-scrolling: touch; 
  overflow: scroll; 
} 

wxml文件代码:

<view class="item-box"> 
 <view class="items"> 
  <view wx:for="{{list}}" wx:key="{{index}}" class="item"> 
   <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt"> 
   <image class="item-icon" mode="widthFix" src="{{item.icon}}"></image>{{index}}{{item.txt}}</view> 
   <view data-index="{{index}}" bindtap = "delItem" class="inner del">删除</view> 
  </view> 
 </view> 
</view> 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

侧滑删除(左滑删除),小程序 微信小程序 侧滑删除(左滑删除) 如图所示,demo是小程序的侧滑删除,这个是我在别人写的...

3.3 文字的表达方式

◆直接写中文名称。

◆写字体的英文名称。

◆unicode 编码

图片 6

 

 

 

 

 

                     

基础知识(一),css基础知识 1、Css概念 CSS 指层叠样式表 (Cascading Style Sheets)( 级联样式表 ), Css 是用来美化 html 标签的,相当于页面化...

3、文本元素

3.2 文本属性连写

font: font-style font-weight  font-size/line-height  font-family;

◆:注意:font:后边写属性的值,一定按照书写顺序。 文本属性连写文字大小字体为必写项。

  Font:italic 700 16px/40px  微软雅黑;

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:左侧二级菜单显示与隐藏切换的实例代码,css基

关键词: