持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情
1.swiper组件:
swiper是滑动视图，里面只能放在swiper-item子组件
①。indicator-dots 是否显示小圆点(默认false)
②。indicator-color 小圆点颜色
③。indicator-active-color 当前选中的指示点颜色
④。autoplay 是否自动切换
⑤。interval 自动切换时间间隔
⑥。circular 是否采用衔接滑动(默认false)
-
消息框
wx.showToast({ title：提示的内容 title: '删除成功！', }) <swiper indicator-dots indicator-color="white" indicator-active-color="#369" circular autoplay interval="5000"> <swiper-item> <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed5f99603f5a44d1ac6f39911ecfa240~tplv-k3u1fbpfcp-zoom-1.image"></image> </swiper-item> <swiper-item> <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c341bfe9b93e4d7a9b03b2cdb4d6614d~tplv-k3u1fbpfcp-zoom-1.image"></image> </swiper-item> <swiper-item> <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e11b97c7f39249078e9e486ec96f7dc6~tplv-k3u1fbpfcp-zoom-1.image"></image> </swiper-item> <swiper-item> <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7520520c33824724957c8d552ca33ba3~tplv-k3u1fbpfcp-zoom-1.image"></image> </swiper-item> <swiper-item> <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5cbfc2ae5124299bde5ae1d6a1ce36a~tplv-k3u1fbpfcp-zoom-1.image"></image> </swiper-item> </swiper>
样式：
.container{
width: 100vw;
}
swiper{
height: calc(100vw / 1080 * 420);
}
/* calc()函数用于计算尺寸 */
swiper image{
width: 100vw;
宽原本为1080px,设置成为100vw,100vw/1080就是当前大小和原大小的比，高想等比例缩放的话用原来的420px乘宽的比
height: calc(100vw / 1080 * 420);
}
.types{
display: flex;
justify-content: space-between;
}
bindtap绑定事件
<view class="types">
点击流行框，可以实现隐藏和显示
<view bindtap="popular">流行</view>
<view bindtap="ballad">民谣</view>
<view bindtap="">爵士</view>
<view bindtap="">摇滚</view>
</view>
wx:for用于列表渲染 item返回的是循环的每一项 index返回的是每一项对应的索引 注意：列表渲染的每一项元素要绑定唯一的key
wx:if用于条件渲染，他是反复创建和销毁dom树
<view class="list" wx:if="{{showList1}}">
index是下标，index%2==0? 'active1':'active2'表示下标取余2=0，类名为active1,不等于2则类名为active2
<view class="item {{index%2==0? 'active1':'active2'}}" wx:for="{{list1}}" wx:key="index">
<view>{{index+1}}--{{item}}</view>
data-index自定义属性=下标
<view class="btn" bindtap="del" data-index="{{index}}"> 删除</view>
</view>
</view>
通过hidden属性也可以实现条件渲染 ,表达式返回true隐藏,它使用的是样式控制元素的显示和隐藏
<view class="list" hidden="{{!showList2}}">
<view class="item {{index%2==0? 'active1':'active2'}}" wx:for="{{list2}}" wx:key="index">
<view>{{index+1}}--{{item}}</view>
<!-- <view class="btn" bindtap="del" data-index="{{index}}"> 删除</view> -->
</view>
</view>
两种条件渲染如何选择?
1.如果内容在页面加载时，要根据判断去选择渲染还是不渲染，使用wx:if
2.如果内容在页面加载完成后，会反复切换显示和隐藏,使用hidden
<view wx:if="{{score>=90}}">优秀</view>
<view wx:elif="{{score>=80}}">良好</view>
<view wx:elif="{{score>=70}}">中等</view>
<view wx:elif="{{score>=60}}">合格</view>
<view wx:else>差</view>
</view>
wxcss样式：
wx推出了自己的响应式单位rpx,在iphone6中，1px=2rpx
.types view{
width: 176rpx;
height: 176rpx;
background-color: #369;
text-align: center;
line-height: 88px;
}
.list{
padding: 5px;
border: 1px solid #ccc;
margin: 5px;
}
.list view{
margin: 5px 0;
}
.list .item{
align-items: center;
margin: 5px 0;
display: flex;
padding: 2px 5px;
justify-content: space-between;
}
.list .item.active1{
background-color: lightblue;
}
.list .item.active2{
background-color: lightpink;
}
.list .item .btn{
border: 1px solid black;
padding: 2px 8px;
border-radius: 4px;
}
js样式：
切换显示流行
popular() {
//数据取反
this代表的是page,page里面的data里面的状态取反
this.data.showList1 = !this.data.showList1
// 重新渲染
this.setData({
showList1: this.data.showList1
})
},
切换显示民谣
ballad() {
this.data.showList2 = !this.data.showList2
this.setData({
showList2: this.data.showList2
})
},
删除
del(e) {
// wx.showModal 确认框
wx.showModal({
title: "确认删除吗",
success: ({
confirm
}) => {
if (confirm == true) {
// let {currentTarget:{dataset:{index}}}=e
let index = e.currentTarget.dataset
下标为点事件对象(e)里面的currentTarget里面的dataset里面的index(点击的下标)
// 删除数据
this.data.list1.splice(index, 1);
//重新渲染页面
this.setData({
list1: this.data.list1
})
//消息框
wx.showToast({
title: '删除成功！',
})
}
}
})
}
点击删除按钮会提示是否删除，点击确定，提示删除成功
