本文共 2464 字，大约阅读时间需要 8 分钟。

阿里矢量库的使用

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

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

打开阿里矢量库

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

把图标添加到购物车中

选择你的购物车

点击购物车添加到项目

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

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

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

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

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

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

现在的代码如下： 

效果如下：

具体例子：

WXML：

     
        
         
     
      认证龙头企业
       
      
        
         
     
      14年品牌
       
      
        
         
     
      3小时送花
       
      
        
         
     
      最近317790条好评
       
    
   
   
   

运行效果：

swiper滑块

微信官方文档：

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

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

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

部分属性效果：

代码：

运行效果：

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

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

代码：

效果如下：

数据绑定

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

简单绑定

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

内容

   
     {
  { message }} 
   

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

例子：

JavaScript：

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

WXML：

   
     {
  {name}} 
   
   
     {
  {arr[0]}} {
  {arr[1]}} 
   
   
     {
  { obj.name }} {
  { obj.age }}
    
   
    看是否隐藏
   

显示效果：

绑定事件 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:

   
     {
  {name}} 
   
   
     {
  {arr[0]}} {
  {arr[1]}} 
   
   
     {
  { obj.name }} {
  { obj.age }}
   
    
   
    看是否隐藏
    
   
     
    
    
     
    隐藏  
    显示 
   

运行效果：

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

转载地址：https://kongchengji.blog.csdn.net/article/details/93998006 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！