微信小程序依据数据渲染列表&&添加样式

最近要做个后台+小程序的项目

　　后台设置更改小程序首页的位置（轮播，菜单，导航栏等）

　　记录一下小程序部分功能:

　　　　　　　　　　　　wx:if进行判断；wx:for列表渲染  ,每条渲染的数据有一个id标识通过id区分数据添加不同的样式。

wxml　　

<view class="container">
  <block wx:for="{{list}}" wx:key="key" wx:for-index="index">
    <view class="defaultClass {{item.id==item.id ? ifClass[item.id-1]: ''}}">{{item.id}}</view>
  </block>
    <button bindtap="locTap">点击改变位置</button>
</view>

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

 

wxss

/**index.wxss**/
.defaultClass{
  height:300rpx;
  margin:30rpx;
  font-size:60rpx;
}
.a{
  background-color: wheat;
}
.b{
  background-color: firebrick;
}
.c{
  background-color: gainsboro;
}
.d{
  background-color: aliceblue;
}
.e{
  background-color: gold;
}
.f{
  background-color: lawngreen;
}

 

 

js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    list:[ // id 区分
      {id:1},
      {id:2},
      {id:3},
      {id:4},
      {id:5},
      {id:6},
    ],
    ifClass:['a','b','c','d','e','f'] // 类名想同直接添加

  },
  locTap(){ // 按钮点击事件 
    var lost = this.data.list
    var lista = []
    for(var i = 0;i<lost.length;i++){
      if(i==0){
        lista[i]=lost[i+1]

      } else if(i>0&&i<lost.length-1) {
        lista[i]=lost[i+1]

      } else {
        lista[i]=lost[i-i]
      }
    }
    this.setData({
      list:lista
    })
  },
　　/*生命周期*/
  onLoad: function () {
    
  },
  onShow(){

  },
})

 

有好的思路或者意见欢迎留言