微信小程序开发（四）——阿里矢量库的直接调用、swiper滑块

阿里矢量库的使用

阿里有一个很方便的矢量库可以让我们去进行图标的使用。

我们可以通过下载图标的方式去使用，也可以通过代码链接的方式去调用这些图标。

打开阿里矢量库

找到对应的图标添加入库，选择你需要的图标

把图标添加到购物车中

选择你的购物车

点击购物车添加到项目

去图标管理中我的项目里去寻找添加的图标，勾已经存在在项目中了。

选择Font class，去生产在线链接代码，把CSS文件在浏览器打开（打开链接），复制这个页面中的代码

将刚刚复制的代码复制到app.wxss

引用text，必须有一个类型iconfont。在iconfont里找到相应的类名，把他当作文字去对待

然后再去图标库中我的项目里，去复制这个图标的名称代码

将刚刚复制的名称复制到text代码中

<text class='iconfont '></text>

现在的代码如下：

<text class='iconfont icon-gou'></text>

效果如下：

具体例子：

WXML：

<view class='conpany-plain'>
  <view class='item'>
    <text class='iconfont icon-gou'></text>
    <text>认证龙头企业</text>
  </view>
  <view>
    <text class='iconfont icon-gou'></text>
    <text>14年品牌</text>
  </view>
  <view>
    <text class='iconfont icon-gou'></text>
    <text>3小时送花</text>
  </view>
  <view>
    <text class='iconfont icon-gou'></text>
    <text>最近317790条好评</text>
  </view>
</view>

<view class='pos'></view>
<view class='a'></view>

运行效果：

swiper滑块

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

使用swiper，滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

我们可以在swiper-item中放置块view或者行内元素

可以变成使用鼠标控制的滑块

部分属性效果：

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向

代码：

<swiper>
  <swiper-item class='s1'>
    <image src='https://i8.mifile.cn/v1/a1/2537f7da-0b30-eb56-7798-184fb9840c94!720x360.webp'/>
  </swiper-item >
  <swiper-item class='s1'>
    <image src='https://i8.mifile.cn/v1/a1/f272e64a-e624-6a56-2c04-2422569db283!720x360.webp'/>
  </swiper-item>
  <swiper-item class='s1'>
    <image src='https://i8.mifile.cn/v1/a1/9f80e031-3a21-dfb9-46c3-ac6a770b4cf0!720x360.webp'/>
  </swiper-item>
</swiper>

运行效果：

我们可以对swiper添加各种属性来实现各种效果

其中indicator-dots是显示圆点，autoplay是实现自动轮播，默认是false，interval是自动轮播的时间间隔。

代码：

<swiper indicator-dots='true' indicator-color='black' indicator-active-color='white'
autoplay='true' interval='2000' circular='true' >
  <swiper-item class='s1'>
    <image src='https://i8.mifile.cn/v1/a1/2537f7da-0b30-eb56-7798-184fb9840c94!720x360.webp'/>
  </swiper-item >
  <swiper-item class='s1'>
    <image src='https://i8.mifile.cn/v1/a1/f272e64a-e624-6a56-2c04-2422569db283!720x360.webp'/>
  </swiper-item>
  <swiper-item class='s1'>
    <image src='https://i8.mifile.cn/v1/a1/9f80e031-3a21-dfb9-46c3-ac6a770b4cf0!720x360.webp'/>
  </swiper-item>
</swiper>

效果如下：

数据绑定

官方文档

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

例子：

JavaScript：

data: {
    name:"赵丽颖",
    arr:["杨晨","司徒"],
    obj:{
      name:"哦哦",
      age:40
    },
    active:"kkkk",
    isFlag:true
  },

WXML：

<view wx:if="{{isFlag}}"> {{name}} </view>
<view wx:if="{{isFlag}}"> {{arr[0]}} {{arr[1]}} </view>
<view class='{{ active }}' wx:if="{{isFlag}}"> {{ obj.name }} {{ obj.age }}</view>
 <view wx:if="{{isFlag}}">看是否隐藏</view>

显示效果：

绑定事件 bindtap

绑定事件:bindtap="事件处理函数" 事件处理函数在js中

更改一个值并渲染到页面,不能用this.data直接更改

wx:if="true/false" 是是否让内容显示或隐藏

例子：在JavaScript中定义两个方法，在初始数据中定义一个isFlag作为true和false

data: {
    name:"赵丽颖",
    arr:["杨晨","司徒"],
    obj:{
      name:"哦哦",
      age:40
    },
    active:"kkkk",
    isFlag:true
  },
closeHandle:function(){
    console.log("点击")
    console.log(this.data.isFlag)
    // 更改一个值并渲染到页面,不能用this.data直接更改
    // this.data.isFlag = false
    this.setData({
      isFlag:false
    })
  },
  openHandle:function(){
    this.setData({
      isFlag:true
    })
  }

WXML:

<view wx:if="{{isFlag}}"> {{name}} </view>
<view wx:if="{{isFlag}}"> {{arr[0]}} {{arr[1]}} </view>
<view class='{{ active }}' wx:if="{{isFlag}}"> {{ obj.name }} {{ obj.age }}</view>
<!-- 绑定事件 bindtap
  wx:if="true"
 -->
 <view wx:if="{{isFlag}}">看是否隐藏</view>

 <!-- 绑定事件:bindtap="事件处理函数" 事件处理函数在js中-->
<view class='img' wx:if="{{isFlag}}">
  <image src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7b2063a4f85d95b37ec3a061c47b9c1.jpg?thumb=1&w=358&h=252'></image>
</view>

 <view class='f1'>
  <button bindtap='closeHandle'>隐藏</button>
  <button bindtap='openHandle'>显示</button>
 </view>

运行效果：

一起学习，一起进步 -.- ，如有错误，可以发评论