微信小程序wxs模块语法（应用在多项选择里）

最新推荐文章于 2024-07-26 14:06:36 发布

暴雨课堂

最新推荐文章于 2024-07-26 14:06:36 发布

阅读量572

点赞数 1

文章标签：微信小程序小程序服务器 javascript

本文链接：https://blog.csdn.net/qq_37170740/article/details/123589157

版权

先看效果

在wxml中引入wxs代码块的写法：

在wxml中引用wxs的逻辑：

下面是完整代码

wxml：

<wxs module="util">
    module.exports.include = function (listid, id) {
        return listid.indexOf(',' + id, ",") > -1
    }
</wxs>
<view style="height: {{hei}}px;background-color: #fff; width: 140rpx;position: fixed;left: 0;">
    <view wx:for="{{count}}" wx:key="index" class="normal {{util.include(listid,index+1)?'sel':''}} " bindtap="click" data-id="{{index+1}}">类型{{index+1}}</view>
</view>
<button bindtap="add_count">count++</button>

wxss：

.intro {
  margin: 30px;
  text-align: center;
}

.normal{
  color: #333;
  font-size: 28rpx;
  padding: 20rpx;
  background-color: #fff;
 text-align: center;
}
.sel{
  color: red;
}
page{
  background-color: #f1f1f1;
}
button{
  /* margin: 30rpx auto; */
  background-color: rgb(21, 197, 139);
  color: #fff;
}

JS：

Page({
  data: {
    count: 4,
    listid: ',',

  },
  add_count() {
    this.setData({
      count: this.data.count + 1
    })
  },
  onLoad() {
    wx.getSystemInfo({
      success: (result) => {
        console.log(result)
        this.setData({
          hei: result.screenHeight- result.statusBarHeight-44
        })
      },
    })
  },

  click(e) {
    var id = e.currentTarget.dataset.id
    var listid = this.data.listid
    if (listid.indexOf(',' + id + ',') != -1) {
      //已存在
      //',1,2,'
      listid = listid.replace(',' + id + ',', ',')
    } else {
      //不存在，加入
      listid += id + ','
    }
    this.setData({
      listid
    })
   
  },
})

ps:微信小程序开发交流QQ群：897729103

本人微信：649231659，承接软件开发&学习交流