标签:index 微信 contentAnimate height item overlayAnimate 组件 data 下拉框
前言
近日开发微信小程序时,需要一个下拉框的组件,使用和PC端下拉框一样的方式会显得很丑,于是发现微信官方API有个wx.showActionSheet
,但是有诸多限制,例如:最大长度只能是6项,多选等等。
由于业务需要,下面用到下拉框(actionSheet)支持自定义 高度, 选项,单选,多选,以及遮罩层的透明度等参数。
效果
看完效果直接上代码
组件代码
index.js
Component({
properties: {
//数据集
options: {
type: JSON,
value: ''
},
//内容层高度
topsHeight: {
type: String,
value: '40%'
},
//遮罩层透明度
opacity: {
type: String,
value: '0.5'
},
//是否单选
IsSingle: {
type: Boolean,
value: true
}
},
data: {
isShow: false,
contentAnimate: null, //内容动画
overlayAnimate: null, //遮罩层动画
},
methods: {
/**
* 关闭
*/
_close: function () {
var that = this;
this.contentAnimate.bottom("-40%").step();
this.overlayAnimate.opacity(0).step();
this.setData({
contentAnimate: this.contentAnimate.export(),
overlayAnimate: this.overlayAnimate.export(),
});
setTimeout(function () {
that.setData({
isShow: false,
})
}, 200)
},
/**
* 显示
*/
_show: function () {
var that = this;
that.setData({
isShow: true,
})
// 容器上弹
var contentAnimate = wx.createAnimation({
duration: 200,
})
contentAnimate.bottom(0).step();
//遮罩层
var overlayAnimate = wx.createAnimation({
duration: 250,
})
overlayAnimate.opacity(`${this.properties.opacity}`).step();
this.contentAnimate = contentAnimate;
this.overlayAnimate = overlayAnimate;
this.setData({
contentAnimate: contentAnimate.export(),
overlayAnimate: overlayAnimate.export(),
})
},
/**
* 设置选中
*/
_setSelect: function (even) {
let data = this.data.options;
let index = even.currentTarget.dataset.index;
if (this.properties.IsSingle) {
data.forEach((item, i) => {
if (i == index) {
item.Selected = !item.Selected;
}
else {
item.Selected = false;
}
});
}
else {
data[index].Selected = !data[index].Selected;
}
this.setData({
options: data
});
},
/**
* 确定
* */
_submit: function () {
this.triggerEvent('OnSelectFinish', this.properties.options);
this._close();
},
/**
* 外部方法调用,显示组件
*/
showPopup: function () {
this._show();
}
}
})
index.json
{
"usingComponents": {},
"component": true
}
index.wxml
<view class="selectComponent" style="height:{{topsHeight}};bottom: -{{topsHeight}};" wx:if="{{isShow}}" animation="{{contentAnimate}}">
<image src="../../images/icon_close_gray.png" class="close" catchtap="_close"></image>
<view class="select-ul">
<view class="select-li" wx:for="{{options}}">
{{item.Text}}
<block wx:if="{{IsSingle}}">
<view class="checkbox {{item.Selected ? 'singlechecked' : 'singleunchecked'}}" data-index="{{index}}" bindtap="_setSelect"></view>
</block>
<block wx:else>
<view data-single="{{IsSingle}}" class="checkbox {{item.Selected ? 'checked' : 'unchecked'}}" data-index="{{index}}" bindtap="_setSelect"></view>
</block>
</view>
</view>
<view class="SubmitBtn" bindtap="_submit">
确 定
</view>
</view>
<!-- 遮罩层 -->
<view class="overlay" catchtap ="_close" wx:if="{{isShow}}" animation="{{overlayAnimate}}"></view>
index.wxss
.overlay{
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0);
}
.selectComponent{
background-color: white;
position: fixed;
/* bottom: -40%; */
left: 0;
width: calc( 100% - 100rpx);
/* height: 40%; */
z-index: 10000;
padding:20rpx 50rpx;
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
}
.SubmitBtn{
border-top: 10px #F7F8FA solid;
height: 120rpx;
text-align: center;
line-height: 90rpx;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #4876F9;
color: white;
}
.select-ul{
height: calc( 100% - 200rpx);
overflow: auto;
margin-top: 50rpx;
}
.select-li{
text-align: left;
line-height: 80rpx;
height: 80rpx;
position: relative;
font-size: 14px;
}
.checkbox{
top:24rpx !important;
right: 30rpx !important;
height: 34rpx;
}
.close{
width: 14px;
height: 14px;
position: absolute;
right: 30rpx;
top: 30rpx;
}
.checkbox{
width: 30rpx;
height: 30rpx;
top: 58rpx;
right: 0rpx;
position: absolute;
background-repeat: no-repeat;
background-size: 30rpx;
}
.singlechecked{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAYAAAGHa02RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAHqADAAQAAAABAAAAHwAAAAD3IR61AAAEhklEQVRIDb1WYWgcRRR+M7ezCUcirUojkvZPpLVIRFJLaxEjFDQb0RYkYFspRawV6y+FS661EKw23IG/asEalFixIgaa2CZ3oQUNaJvSWoVAK2JEREoqtkhbgrd7u+N7c5m92bvtXWNrB+7m7Xvve9/OzHtvFmB+dPcVNpHI6K8rVZA0q9HVW7g4/asvaZCh2oPcnLTXWfLHGCZeWGwV1xaavaL8PqLIZxuYCuqk3LUS5CnTmzF2KZex72NOb2FYSnjeNKIBnF5XqbhI2Du1kQw0tBGjBIqClF0p9xKAXEIyDeIvSca/0+e9ubFfLtKq+FXPo3HBboAhq8OgA641alizsuynNmJgu6VonnyEw+kL5Z1XxvRgET7fI+CbH5HBGLw5ad9Dz5v2eoZaneAM/7KfXVnWZpd2Yd7MGXs9l214oMyOhlcOSvH7jPeHuSFmOAKNZ+wDWqfAPf3y7mtz7mWtrDcjaEYxP7dLtrhFd7YeoGM5g57OBNDiadD5Wa7v/lAL+Hg7g90vCnXo534uAckf85Zb+AoncWfD9DmUFnD5qoTx0wG80WMpkM6WShK15lpHXAnQz5T7CkyKuOzWjuasM550Idh0IFmVm4RHGQQX7UY7N9LP/q70iQVTTrv/uI4Efj+GP5sbEJOVQHqOgLt73Z2BlO/HOaLrn8vaROuHO1iYhyEYd3QWt78lHljWMmCP5bL2FGkU2EkVfsHjaiu71JaoGCjn+bO73I6FACnstTnvL5p50YczJNQbo+8IEKWaRVfJKK05pVk94FfvCpg4G2APLHt6vnsgjFVWR6Vj+wSMfhfA4JgfMeBS10VYqfM1GmV/bEDA8GQ1UEeJgF/KuHBkrw3JRoAxBB4+4cPQRJRRA/GYTmJTduliCIMswX75SdqGoXwRvvg62rA0kGbbwo5OR0WXgWloTtJxmJpKmcl81ub86D77HL7CjGmuDQRoTop7yV+9rupHeLmYAW4kU3pSdoVgEuhWou54I1CpMGxb5zX5hYVhgv5TSZoBtIxtuen6nLcNnzfildOJnS8+sRgrMgmT6DfSlBRDuLTrOkbcHPvWTkq2SvBGMf874kA3r2N4kGJDLsvwEoqOCPEzKbkyYN4U5ttdUbdbe8J+e5VLsXYsyy7oSGFCY4J/5oN7/naTEhHFpNjEESHGL648Gjdr5a3OK5YyrLjqKMRBXGRh3X3uy0EgB6vdFq5ZvYLBW1stJGUwPuXD/iPxPYRztt3Cj7pXF04RRax7iEF6iwVWgsHotz58cDSeUKOIkzakXSvMeVETwNanEnAQgxTCO830AHjiYQ6pFxKQQMLhSR8+Gq9NaKDbiXgaf6sMpRKTDQCrH+TgrEnA+d8C2PNxEeYKJa/1HRy/UxKAW6ba8qfHb5pQ00zXPeOWxQCZHQJaFjOYvRKoGcujbjvXDHEznbGqY5VpEp6Oc9K65a0A770m4MxPAbx9aMEr1GGo0U7kMw1dYQOhGrudJVVmKku4U4fxUthCmpCYHu5k54oQEzmNDbvl0oLnjdyxXl2ijf7/X7fTv29b1lvolvvfAAAAAElFTkSuQmCC");
}
.singleunchecked{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAXCAYAAAF4748IAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFqADAAQAAAABAAAAFwAAAAAhQRrqAAACFElEQVRIDbVUPUhCURT2vafxHGoLqikahZBQKKKptS1QEP9rCmlrj5ocanJoEvWpCA5trc0NSVTQGE1RjTWo+dd3rt7He88bz0d24XrPOd93v3vvOefpcmEUCoUFWl2lUinLDOFPpVJZNQHlcvlU5pF+v7/F7Hq9Ps+D+qpp2qvujAxsX2QmwBAHcYUPbrMVrE09AGZGd2DAfzD6Njbo+0IKgDwBeKLPRAAQ4iAHiITYO/fZinvvmQICB5xruvJYJgRcF2VHHgwGmggUxA5YDOoZYQFGO4CzhElWBeoBt9u9IknSVywWezTiY2TqBFxtttvtPqfT6TcjWbcpRdZ8IpbH1KvNyPxO+k6DQW8BPiw6y58BFJkgD0tMzSkiWGMQzVITX1gBkY/sJIg88SDysDI2W1ilnTxQTiaT23apw6Gq6WBssC2Ko3KPkek4lH0ODzrCTGB+I3SL1LG+h78EPwh/BmtJluVzNNwnbNMwCaOYx/iDSYGxi3ffmZi/OEjmGqBLHFCMx+MnnMaEq9VqoNfrXXk8no1IJPLCQSdrrVZb7nQ6N4qi7ESj0YaE5K5DQFNV1RcOh3tOxKxcNL7SarWeEGcdl0PeUn8VpUNIg7Rg5qg7/V6vt4F1KmOk5Sfh+2azGZiKKkTa7XaQNEn4EK1TpPz8VZw0kIoC0ySxf+kK4y2n3sdGcbIn/fKQQg3zTPTl/QCbiSIVV84yRQAAAABJRU5ErkJggg==");
}
.checked{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAFMN540AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADKQTcFAAACVElEQVRIDWP0KPv5nwEJMCGxwUywwJY2VoaFFaxgAUZ0LRgC2M1ANhhDBYYZyKpBbAwdIMFlNRAnYSjY1AqRiGr5DZIDA4JW4FWA1X6Y0aRJdqSxwDRCvJXsxQwWmJDNwlAx6w+q5Nxtfxnq4pgZCqYiJEAqyHctXp1wy3Ew8HoVhx64MNGaW5JYGJZUIyIXZAIi0ODmoTK6M1gYJIUZGWJaEZEOU4GhOc6NmSHMkYnh/vP/DNwcjAxJXZiaYJoHLsAGzmaiowoWSMj0INfMCkwN2zvZGNjQUgVBZ7MDU+SmVjaG9L7fDL9QsyNqASUmiBwcDAycbAwMG1rYGFK6fzE8eolS4IIVoti8sIKNwVYPIsTFwcCwrpmNIbHzF8PTN6iGwngovvAs/wX222TOPwy5QSwMce2/GF5/gCnFpFFsBkmDDABpTCCgEaR2JCZPivwMCjRyAUZMkWsQqfpGLSY1xDDUswIr+JpYFgYzDUYMOWQBlKyMLEEqG1S0NSSwMBiqMjF8+PKfYclu/CZQbDEHsIRrSmRh0FViYnj3+T9DWu8vhsev8FsKksVpsZ81E0OqNzNDx7I/DEevYBaZXOwMDC3JLAya8kzAAu4/sAL/xfD8LWELYSpwWrzp6D8GIV5GYHyxMvz995+he8VfhoMX/zHwcDIwtKawMKjJMDG8fPefIb7jF8Or9zDjiKeJKkCiXZgYYlxZGP7//8/AyMjI8OzNf4byWb8Z3nwk3iJ0lURZDNNUGs7MsObQX2D7CCZCPk2SxeRbg6lztOTCDBMaiQAAd5umrrmKwxQAAAAASUVORK5CYII=");
}
.unchecked{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAAGzs1ytAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFqADAAQAAAABAAAAFgAAAAAcITNaAAAAaUlEQVQ4EWNcuHDhfwYYQOYwwQRBNCOyDLIEGhuXMhTDkPXglCDWRmTDqMjG5RFsVuD0wyBWTJvgBYXaUAyNYe9mBlLSM7Zki02M5NjGZgguMZKiBJch2MRHDYaHymhQ0D4oaFPQAt0NAFtBH+4zl50uAAAAAElFTkSuQmCC");
}
调用页面代码
index.wxml
<!-- 出库类型下拉框 -->
<select id="select" options="{{options}}" topsHeight="{{topsHeight}}" opacity="{{opacity}}" IsSingle="{{IsSingle}}"
bind:OnSelectFinish="SelectFinish"></select>
json文件需要引用组件
{
"usingComponents": {
"select":"../../../../components/select/index"
}
}
js 文件
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
options: [], //数据集
topsHeight: "30%", //高度
opacity: "0.5", //透明度
IsSingle: true //是否单选
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
//初始化出库类型
this.initExitType();
},
/**
* 初始化出库类型
*/
initExitType() {
/* 这里是系统封装的函数,下面需要换成自己的访问代码*/
var that = this;
HTTP.GetExitTypeList().then((res) => {
if (res.ErrorCode === 0) {
var newArray = [];
res.Data.forEach(item => {
newArray.push({ "Text": item.Text, "Value": item.Value });
});
that.setData({
options: res.Data
});
}
})
},
/**
* 下拉框选择完成事件
*/
SelectFinish: function (even) {
console.log(even.detail)
},
/**
* 显示出库类型下拉框
*/
selectStockOutType: function () {
this.selectComponent("#select").showPopup();
}
})
效果图
标签:index,微信,contentAnimate,height,item,overlayAnimate,组件,data,下拉框 来源: https://blog.csdn.net/IT_rookie_newbie/article/details/121520936
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。