微信小程序商城列表页

wxml:

<view class='list'>
  <block wx:for='{{dataList}}' wx:key='list' wx:for-item="item">
  <view class="list_item">
      <navigator url='details?id={{item.goods_id}}'>
      <view class='img'>
        <image src="{{imghref}}{{item.goods_img}}"  mode="scaleToFill"/>
      </view>
      <view class='info'>
        <view class='title'>{{item.goods_title}}</view>
        <view class='price'>￥{{item.goods_price}}</view>
        <view class='num'>销量{{item.goods_xiaoliang}}</view>
      </view>
       </navigator>
      <view class='clear'></view>
  </view>
  </block>
</view>

wxss:

.clear{
  clear: both;
  overflow: hidden;
}
navigator{
  display:inline;
}
.list{
  margin-top:10px;
}

.list .list_item{
  margin-top:10px;
  padding:10px;
  height:100px;
  border-bottom:1px solid #E8E8E8;
}
.list .list_item .img{
  float:left;
  width:40%;
  height:100%;
}
.list .list_item .img image{
   width:100%;
   height:100%;
}

.list .list_item .info{
  width:59%;
  float:right;
  height:100px;
  position:relative;
}
.list .list_item .info .title{
  color:#333;
  margin-left:10px;
  font-size: 15px;
}

.list .list_item .info .price{
  color:#FF2727;
  margin-left:10px;
  margin-top:10px;
  font-size:15px;
}

.list .list_item .info .num{
  position: absolute;
  left:0px;
  bottom:10px;
  color:#747474;
  margin-left:10px;
  font-size:15px;
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList:[
      {
        goods_id:1,
        goods_title:'商品标题1',
        goods_img:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        goods_xiaoliang:'0',
        goods_price:'60'
      },{
        goods_id:1,
        goods_title:'商品标题2',
        goods_img:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        goods_xiaoliang:'0',
        goods_price:'70'
      }, {
        goods_id: 1,
        goods_title: '商品标题3',
        goods_img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        goods_xiaoliang: '0',
        goods_price: '80'
      }, {
        goods_id: 1,
        goods_title: '商品标题4',
        goods_img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        goods_xiaoliang: '0',
        goods_price: '90'
      }, {
        goods_id: 1,
        goods_title: '商品标题5',
        goods_img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        goods_xiaoliang: '0',
        goods_price: '110'
      }
    ],
  }
})

1 问题描述

打开Wireshark时，都会有一个网卡列表，在该列表中显示了电脑的所有网卡。但是，有时打开Wireshark时，该网卡列表不显示，如图1所示。

图1 不显示网卡列表

黄色背景的英文为“Local interface are unavailable because the packet capture driver isn’t loaded”，其主要意思是Wireshark的包捕获驱动没有导入成功，导致本机网卡不可用。

2 解决方法

使用net start指令打开NPCAP服务即可。使用管理员权限打开cmd，之后输入net start npcap，如图2所示。

图2 打开NPCAP服务

相关链接1 NPCAP是Npcap Packet Driver即Npcap包驱动服务的简称，Npcap是一个网络数据包抓包工具，是WinPcap的改进版。WinPcap是Windows Packet Capture即Windows包捕获的简写，提供了在Windows进行捕获数据包的编程接口。

打开NPCAP服务之后，再次打开Wireshark，就可以看到网卡列表了，如图3所示。

图3 显示网卡列表

概述

列表的类型分为三种: 无序列表, 有序列表, 定义列表.

无序列表

无序列表, 用来表示一个列表的语义. 并且每个项目之间, 是不分先后的.

你会发现, 这是我们学习的第一个 “组标签”. 就是要么不写, 要么就要写一组.

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>杭州</li>
</ul>

ul (unordered list), “无序列表” 的意思. li (list item), “列表项” 的意思.

也就是说, 所以的 li 不能单独存在, 必须包裹在 ul 里面. 反过来说, ul 的 “儿子” 不能是别的东西, 只能有 li.

错误写法

下面的是错误, 因为必须用 ul 包裹:

<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>杭州</li>

下面也是错误的, 因为 ul 里面只能有 li 标签, 而不能有别的:

<ul>
    <h3>中国主要城市</h3>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>

正确写法

正确写法:

<h1>中国一线城市</h1>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>杭州</li>
</ul>

浏览器会默认的给无序列表小圆点的 “先导符号”.

但是, 我们这里再次强调, ul 的作用, 并不是给文字增加小圆点的, 而是增加无序列表的 “语义” 的.

ul 标签实际应用场景: 导航条, 列表等.

li 里面可以放置的内容

ul 的儿子, 只能是 li. 但是 li 是一个容器级标签, li 里面什么都能放, 比如:

<ul>
    <li>
        <h4>我是小白呀讲Java</h4>
        <p>¥49.00</p>
        <p>此书是根据学习理论所设计的，非常适合零基础的小白， 读起来轻松搞笑，
            让你可以从程序语言的基础开始一直学习到包括线程、网络与分布式程序等项目。
            最重要的是，你将学会如何像个面向对象开发者一样去思考。
            感受当</p>
    </li>
    <li>
        <h4>我是小白呀带你玩转Python</h4>
        <p>¥23.60</p>
        <p>这本书全面、深入地介绍了 Python 语言，不管你是编程新手还是 Python 初学者，
            它将帮助你快速实现使用 Python 编写高质量，且易于与其他语言和工具集成的代码。
            本书每一章都是关于Python语言独立的内容，并且带有练习和测试，简单易学，适合入门。</p>
    </li>
    <li>
        <h4>我是小白呀带你走进C++</h4>
        <p>26.00</p>
        <p>作为久负盛名的C++经典教程，丰富的教学辅助内容、精心组织的编程示范，无论是初学者入门，
            或是中、高级程序员提升，都是不容置疑的首选。 一本好书只有读过才有价值.</p>
    </li>
</ul>

执行结果:

甚至于可以再放一个 ul:

<ul>
    <li>吃的
        <ul>
            <li>饼干</li>
            <li>面包</li>
        </ul>
    </li>
    <li>巧克力
        <ul>
            <li>德芙</li>
            <li>费力罗</li>
        </ul>
    </li>
    <li>用的
        <ul>
            <li>笔记本</li>
            <li>圆珠笔</li>
        </ul>
    </li>
    <li>喝的
        <ul>
            <li>牛奶</li>
            <li>可乐</li>
        </ul>
    </li>
</ul>

有序列表

ordered list 有序列表, 用 ol 表示.

代码实现

<ol>
    <li>小小白</li>
    <li>小白</li>
    <li>大白</li>
</ol>

执行结果:

由此可见, 浏览器会自动为有序列表增加阿拉伯数字编号. 我们可以发现, ol 和 ul 就是语义不一样, 使用上都是一样的.

语法

ol 里面只能有 li, li 必须被 ol 包裹. li 是容器级.

<ul>
    <li>1. 小小白</li>
    <li>2. 小白</li>
    <li>3. 大白</li>
</ul>

注: ol 的使用并不广泛, 大家也会使用 ul 来表达顺序.

定义列表

定义列表也是一个组标签, 不过比较复杂. 出现了三个标签:

dl 表示 definition list 定义列表
dt 表示 definition title 定义标题
dd 表示 definition description 定义表述词

dt, dd 只能在 dl 里面: dl 里面只能有 dt, dd.

代码实现

<dl>
    <dt>北京</dt>
    <dd>国家首都, 政治文化中心</dd>
    <dt>上海</dt>
    <dd>魔都, 有外滩, 东方明珠塔, 黄埔江</dd>
    <dt>广州</dt>
    <dd>中国南大门, 有珠江, 小蛮腰</dd>
</dl>

执行结果:

表达的语义是两层:

1. 是一个列表, 列出了北京上海, 广州三个项目
2. 每一个词都有自己的描述项

dd 是描述 dt 的:

灵活使用

定义列表用法非常灵活, 可以一个 dt 配很多 dd:

<dl>
    <dt>北京</dt>
    <dd>国家首都</dd>
    <dd>政治文化中心</dd>
    <dt>上海</dt>
    <dd>魔都, 有外滩</dd>
    <dd>东方明珠塔</dd>
    <dd>黄埔江</dd>
    <dt>广州</dt>
    <dd>中国南大门</dd>
    <dd>有珠江</dd>
    <dd>小蛮腰</dd>
</dl>

还可以拆开, 让每一个 dl 里面只要一个 dt 和 dd. 这样子感觉清晰一些.

<dl>
    <dt>北京</dt>
    <dd>国家首都, 政治文化中心</dd>
</dl>
<dl>
    <dt>上海</dt>
    <dd>魔都, 有外滩, 东方明珠塔, 黄埔江</dd>
</dl>
<dl>
    <dt>广州</dt>
    <dd>中国南大门, 有珠江, 小蛮腰</dd>
</dl>

注: 用什么标签, 不是根据样子来决定, 而是语义.