小程序中WXS的使用
一、介绍
每一个 .wxs 文件和 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
二、案例及使用
var some_msg = "hello world";
module.exports = {
msg : some_msg,
}
{
{foo.msg}}
页面输出
hello world
三、demo效果图案例
四、案例代码
wxml
{
{item.name}}
module.exports.includes = function(arr, str){ return arr.indexOf(str)>=0 || (arr.length===0&&!str) }
{
{item.name}}
js
// 数据定义
params: {
totalPrice: [],
areas: [],
roomCount: [],
},
paramsName: {
totalPrice: [],
areas: [],
roomCount: [],
},
cityNames: '',
returnData: [
{
name: '请选择总预算',
type: 'totalPrice',
multi: true,
data: [
{
qiuhao: 'totalPrice',
name: '50万以下',
val: '0-50'
},
{
qiuhao: 'totalPrice',
name: '50-80万',
val: '50-80'
},
{
qiuhao: 'totalPrice',
name: '80-100万',
val: '80-100'
},
{
qiuhao: 'totalPrice',
name: '100-120万',
val: '100-120'
},
{
qiuhao: 'totalPrice',
name: '120-150万',
val: '120-150'
},
{
qiuhao: 'totalPrice',
name: '150-200万',
val: '150-200'
},
{
qiuhao: 'totalPrice',
name: '200-300万',
val: '200-300'
},
{
qiuhao: 'totalPrice',
name: '300万以上',
val: '300-0'
}
]
},
{
name: '请选择购房面积',
type: 'areas',
multi: true,
data: [
{
qiuhao: 'areas',
name: '50㎡以下',
val: '0-50'
},
{
qiuhao: 'areas',
name: '50-70㎡',
val: '50-70'
},
{
qiuhao: 'areas',
name: '70-90㎡',
val: '70-90'
},
{
qiuhao: 'areas',
name: '90-110㎡',
val: '90-110'
},
{
qiuhao: 'areas',
name: '110-130㎡',
val: '110-130'
},
{
qiuhao: 'areas',
name: '130-150㎡',
val: '130-150'
},
{
qiuhao: 'areas',
name: '150-180㎡',
val: '150-180'
},
{
qiuhao: 'areas',
name: '200㎡以上',
val: '200-0'
}
]
},
{
name: '请选择购房户型',
type: 'roomCount',
multi: true,
data: [
{
qiuhao: 'roomCount',
title: '不限',
name: '不限',
type: 1,
value: '',
val: ''
},
{
qiuhao: 'roomCount',
title: '一居',
name: '一居',
type: 1,
value: '1',
val: '1'
},
{
qiuhao: 'roomCount',
title: '二居',
name: '二居',
type: 1,
value: '2',
val: '2'
},
{
qiuhao: 'roomCount',
title: '三居',
name: '三居',
type: 1,
value: '3',
val: '3'
},
{
qiuhao: 'roomCount',
title: '四居',
name: '四居',
type: 1,
value: '4',
val: '4'
},
{
qiuhao: 'roomCount',
title: '五居',
name: '五居',
type: 1,
value: '5',
val: '5'
},
{
qiuhao: 'roomCount',
title: '五居以上',
name: '五居以上',
type: 1,
value: '6',
val: '6'
}
]
}
]
// 点击方法
itemHandleClickFun(e) {
const {item} = e.currentTarget.dataset;
let arr = this.data.params[item.qiuhao]
let arr2 = this.data.paramsName[item.qiuhao]
const idx = arr.indexOf(item.val);
console.log(arr,arr2,idx)
if (item.val) {
if (idx < 0) {
arr.push(item.val)
arr2.push(item.name)
} else {
arr.splice(idx, 1)
arr2.splice(idx, 1)
}
// console.log(arr,arr2,idx)
} else {
arr = [];
arr2 = [];
}
this.setData({
[`params.${item.qiuhao}`]: arr,
[`paramsName.${item.qiuhao}`]: arr2,
});
console.log(e.currentTarget.dataset)
},
wxss
.tabs {
overflow: hidden;
}
.tabs view{
float: left;
width: 160rpx;
height: 60rpx;
border-radius: 12rpx;
background: #F5F6F8;
margin-right: 20rpx;
margin-bottom: 30rpx;
line-height: 60rpx;
text-align: center;
font-size: 24rpx;
color: #4A4A4A;
font-weight:400;
}
.tabs view:nth-child(4n+0){
margin-right: 0;
}
.tabs .active{
background: #1586EE;
color: #fff;
}