微信小程序开发笔记（四）UI 续

本篇接微信小程序开发笔记（三），这里主要是来实现几种常见的效果，增强对微信小程序UI的理解和使用。篇幅有点长 可根据需要 只看123中的任意一个

1）购物车列表 左滑删除商品

尽管我个人不喜欢左滑右滑来删除，但是UI小哥哥设计的是这样的功能，so, 开心就好，撸起袖子，就是干！先上一张效果图

image.png

首先滑动删除，肯定就想到了 控制横向滑动就好了，难道真的这么简单，哈哈哈，是的，就这么简单，在列表view最外层加一层，需要注意的是，微信小程序默认宽度750rpx，所以内容控制在750rpx，然后删除按钮的大小可设置一个固定值，这样好控制的宽度，这里用的是150rpx，所以的宽度固定为了900rpx，然后绑定删除事件就可以了。发现，删除第一个商品后，第二个就自动显示删除按钮，然后发现 的这个scroll-into-view属性，可以滚动到某个设置id的view的位置，于是给列表view 设置id,在完成删除操作后，让view 滚动到该id的位置就可以啦。至此，搞定购物车删除功能。

未命名文件.png

部分代码：
wxml

 
    
      
      item布局 此处省略
      删除
      
      

js

// 删除之后 回滚到初始状态
      let toView = 'scroll-before'
      that.setData({
        toView: toView
      })

wxss

/** 去掉scroll-view的滚动条 ，如果多个不同用途的scroll-view ，则所有的都不显示滚动条 **/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}

这样的做法的一个弊端就是，如果用户滑动后没有删除操作，继续加载数据的时候，这个滑动到一半的状态依然存在，并不会回滚到初始状态。

2）tabBar效果

微信小程序 自己提供了tabBar,在app.json中进行配置tabBar即可，点击[微信小程序全局配置]查看详情，效果图如下

image.png

这里不介绍官方的这个，看 文档就可以了，没必要看我的这些废话了撒。

首先实现一个顶部tabBar，效果图：

image.png

wxml：其实就是水平放置了一个view,循环取出tab上的内容，会发现这里用的是而不是 所以当内容过多的时候会出现拥挤的情况，如果内容过多 可以考虑使用，让后就是选中和没选中两种状态的判断，显示不同的view

  
    
    {{item.text}}
    
     
    {{item.text}}
    
  

wxss: 把总体的tab固定在屏幕顶部，然后就是选中和未选中的两种状态。选中的时候 下面画了一条线，改变了文字的颜色

.top-tab {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.tab-navigation-bar {
  color: #333;
  font-size: 28rpx;
}

.tab-navigation-bar .selected {
  border-bottom: 8rpx solid #fa6e57;
  padding-bottom: 10rpx;
  color: #fa6e57;
  font-size: 28rpx;

}

js，当点击时改变切换状态

/**
   * 切换tab
   */
  tapTab:function(e){
    let that = this

    var idx = e.currentTarget.dataset.id
    var tabs = that.data.tabs

    // 设置选中的效果
    tabs.map(function(item,index,arr){
      if(index === idx){
        item.isSel = true
      }else{
        item.isSel = false
      }
    })

    that.setData({
      tabs:tabs
    })

其实写下来发现是不是还挺简单的，等等，你以为我只想要这个切换的效果，下面的数据怎么办，不同的tab对应不同的内容吧，内容有列表有瀑布流还有设计师想象的各种页面，OK,继续，我们知道可以通过if或者hidden，控制view的显示和隐藏，这下立马就懂了吧，我们定义一个变量用来记录当前页面的索引，切换时实时更新变量的值就可以实现不同的页面展示效果了，想要什么样就有什么样。

if 是否渲染条件块内的模版，会触发局部渲染以确保条件块，在切换时销毁或重新渲染。如果初始渲染条件是false 则框架什么也不做
hidden组件始终都会被渲染，只是简单控制隐藏与显示，并不会触发重新渲染和销毁
如果状态频繁切换则使用hidden，否则使用if

所以这里用hidden。通过curNav控制当前显示的就可以了，然后 在js中更新即可

 that.setData({
      tabs:tabs,
      curNav:idx,
    })

如果UI都是一样的，那么就不用这么写啦，只需要在加载数据的时候控制就可以了.

3）列表处理

效果图 如下

image.png

刚开始做这种类似gridview效果的时候，感觉还挺麻烦的，后来系统看了一遍css相关属性，发现可通过flex布局的 flex-wrap 来控制 内容是否换行显示，这样就容易处理的多啦，并且还可以逆序显示，可根据需要进行展示。

列表循环for循环的使用,wx:for-item 可以指定数组当前元素的变量名，wx:for-index 可以指定数组当前下标的变量名, 可在子view上通过data-id来绑定数据，一般绑定的是下标，也可以绑定某个数组的值，很实用，可在js中通过 e.currentTarget.dataset.id获取绑定的值

  
    
      
        
        {{item.title}}
        {{item.desc}}
      
    
  

分别点击图片和文字，则打印对应的下标 和 数组中该元素的值

image.png

嗯呢，到这里就写完了，希望对你有帮助，谢谢。愿我们年少有为！！

微信小程序开发系列笔记：
微信小程序开发笔记（三）
微信小程序开发笔记（二）
微信小程序开发笔记（一）