阿里矢量库的使用
阿里有一个很方便的矢量库可以让我们去进行图标的使用。
我们可以通过下载图标的方式去使用,也可以通过代码链接的方式去调用这些图标。
打开阿里矢量库
找到对应的图标添加入库,选择你需要的图标
把图标添加到购物车中
选择你的购物车
点击购物车添加到项目
去图标管理中我的项目里去寻找添加的图标,勾已经存在在项目中了。
选择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>
运行效果:
一起学习,一起进步 -.- ,如有错误,可以发评论