请诊断一下是否是bug,无法阻止透明,用背景图片,用透明度等,都不行!!!
绿色按钮没有透明
文本透出来了
文本透出来了
文本透出来了
下面是源代码:
app.wxss
.k{ display: flex; align-items: center; padding:0 10px; font-size:14px; height:36px; }
.j{ color:#333; font-weight: normal; flex-shrink:0;}
.c{ color:#999; flex-grow:1; flex-shrink: 1; position: relative; line-height: 1.8; padding:5px; }
.in{ padding:3px 5px; border-radius: 5px; border:1px solid gray; margin-right: 6px;}
radio,checkbox{padding: 5px ; color:black; }
.panel{position: absolute; top:0;right:-53px; background:url(https://www.sxldfang.cn/p8/ba.png) ; padding:10px; z-index: 1;
border-radius: 10px; max-height: 200px; overflow-y: auto; border:1px solid #666; }
.h{line-height: 2;margin:5px ; font-size:14px; }
.kong{height:100px;}
.jj{text-indent: 2em; font-size: 14px; color:#333; padding: 10px; line-height: 1.8; }
me.wxml
<view wx:for="{{person}}" class='k'>
<text class='j'>{{item.c}}:</text>
<input wx:if="{{item.t==0}}" class='c in' data-index='{{index}}' bindfocus='sc' bindinput='sc' value="{{item.v}}"></input>
<view wx:elif="{{item.t==1}}" data-who='menu' class='c' bindtap='sc' data-index='{{index}}'>
<text data-who='menu'>{{item.v?item.v:'单击去选择...'}}</text>
<view class='panel' style="display:{{item.s?'block':'none'}}; background:#ccc; opacity:1;" >
<radio-group data-who='group' data-index='{{index}}' bindchange="sc">
<radio wx:for="{{item.i}}" wx:for-item='it' wx:for-index='in' value="{{it}}" checked='{{item.v===it?true:false}}' >{{it}}</radio>
</radio-group>
<button class='h' data-who='hide'>隐藏</button>
</view>
</view>
<view wx:elif="{{item.t==2}}" data-who='menu' class='c' bindtap='sc' data-index='{{index}}'>
<text data-who='menu'>{{item.v?item.v:'单击去选择...'}}</text>
<view class='panel' style="display:{{item.s?'block':'none'}}; background:#ccc; opacity:1;" >
<checkbox-group data-who='group' data-index='{{index}}' bindchange="sc" >
<checkbox wx:for="{{item.i}}" wx:for-item='it' wx:for-index='in' value="{{it}}" checked='{{item.m[in]?true:false}}' >{{it}}</checkbox>
</checkbox-group>
<button class='h' data-who='hide'>隐藏</button>
</view>
</view>
<switch checked bindchange="switch1Change"/>
</view>
me.js
var me=getApp().globalData.me;
// pages/index/me.js
Page({
/**
* 页面的初始数据
*/
data: {
lastIndex:-1,
person: [ // j简拼 c中文名 t数据类型(0-输入框,1-单选,3-多选) i单选或多选的选项 s是否显示单选多选界面(true显示,false隐藏) m初始化多选界面的对勾情况
{
j: 'name',
c: '姓名',
t: 0,
},
{
j: 'sex',
c: '性别',
t: 1,
i:['男','女']
},
{
j: 'mz',
c: '民族',
t: 1,
i: ['汉族', '壮族', '满族', '回族', '苗族', '维吾尔族', '土家族', '彝族', '蒙古族', '藏族', '布依族', '侗族', '瑶族', '朝鲜族', '白族', '哈尼族', '哈萨克族', '黎族', '傣族', '畲族', '傈僳族', '仡佬族', '东乡族', '高山族', '拉祜族', '水族', '佤族', '纳西族', '羌族', '土族', '仫佬族', '锡伯族', '柯尔克孜族', '达斡尔族', '景颇族', '毛南族', '撒拉族', '布朗族', '塔吉克族', '阿昌族', '普米族', '鄂温克族', '怒族', '京族', '基诺族', '德昂族', '保安族', '俄罗斯族', '裕固族', '乌孜别克族', '门巴族', '鄂伦春族', '独龙族', '塔塔尔族', '赫哲族', '珞巴族']
},
{
j: 'xx',
c: '血型',
t: 1,
i: ['A型', 'B型', 'AB型', 'O型']
},
{
j: 'hf',
c: '婚否',
t: 1,
i: ['已婚', '未婚']
},
{
j: 'ah2',
c: '爱好',
t: 2,
i: ['跑步', '游泳', '网球', '羽毛球', '乒乓球', '爬山', '旅游']
},
{
j: 'jg',
c: '籍贯',
t: 0
},
{
j: 'tel',
c: '电话',
t: 0
},
{
j: 'qq',
c: 'QQ',
t: 0
},
{
j: 'email',
c: '邮箱',
t: 0
},
{
j: 'zw',
c: '职务',
t: 0
},
{
j: 'zc',
c: '职称',
t: 0
},
{
j: 'zdxx',
c: '在读学校',
t: 0
},
{
j: 'bj',
c: '在读班级',
t: 0
},
{
j: 'xh',
c: '在读学号',
t: 0
},
{
j: 'byyx',
c: '毕业院校',
t: 0
},
{
j: 'dw',
c: '工作单位',
t: 0
},
{
j: 'bm',
c: '工作部门',
t: 0
},
{
j: 'id',
c: '身份证号',
t: 0
},
{
j: 'kc',
c: '教授课程',
t: 0
},
{
j: 'edu',
c: '最高学历',
t: 1,
i: ['博士', '硕士', '本科', '专科(高专、高职、高技)']
},
{
j: 'zzmm',
c: '政治面貌',
t: 1,
i: ['中共党员', '中共预备党员', '共青团员', '民革党员', '民盟盟员', '民建会员', '民进会员', '农工党党员', '致公党党员', '九三学社社员', '台盟盟员', '无党派人士', '群众']
},
{
j: 'fz',
c: '服装号码',
t: 1,
i: ['XXXL', 'XXL', 'XL', 'L', 'M', 'S', 'XS', 'XXS']
},
{
j: 'jjxm',
c: '紧急联系人',
t: 0
},
{
j: 'jjdh',
c: '联系人电话',
t: 0
},
],
},
sc:function(e){
var i = e.currentTarget.dataset.index;
var change = {}
if (e.type === 'input') {
change["person[" + i + "].v"] = e.detail.value;
}else if (e.type === 'focus' && this.data.lastIndex !== -1){
change["person[" + this.data.lastIndex + "].s"] = false;
change.lastIndex = -1;
}else{
var who = e.target.dataset.who;
if(!who)return;
if (who==='hide'){
change["person[" + i + "].s"] = false;
change.lastIndex = -1;
} else if ( who === 'menu' ){
if (this.data.lastIndex !== -1){
change["person[" + this.data.lastIndex + "].s"] = false;
}
this.data.lastIndex = i;
change["person[" + i + "].s"] = true;
} else if(who=='group'){
var v=e.detail.value;
if(typeof(v)==='string'){//单选
change["person[" + i + "].s"]=false;
}
change["person[" + i + "].v"] = v.length == 0 ? '单击去选择...' : v;
}
}
this.setData(change)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log(me)
var p=this.data.person;
var change={};
for(var i=0;i<p.length;++i){
if(me[p[i].j]){
change["person[" + i + "].v"] = me[p[i].j];
if (p[i].t == 2){//处理多选,单选无需处理,因为逻辑比较简单
var t = ","+me[p[i].j]+",";// ,跑步,游泳,羽毛球,
for(var j=0;j<p[i].i.length;++j){
change["person[" + i + "].m[" + j + "]"] = t.indexOf(","+p[i].i[j]+",") >= 0;//记录选择的是第几项
}
}
}
}
this.setData(change);
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('hide')
var me={};
var p = this.data.person;
for(var i=0;i<p.length;++i){
if(p[i].v) me[p[i].j]=p[i].v;
}
getApp().globalData.me=me;
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
下面是代码片段,单击可以直接在本地开发环境中测试,刚学会,大家看看啊,一定要输入数据
wechatide://minicode/xS61NNmf6aZn
有人回答问题吗?
你把你弹窗的z-index设置大一点就行了
谢谢啦哈,原来设置的比较大,没有问题,后来咋就改成1了,再后来就发现成透明的了,
没想到大小还有这一说,
再次表示感谢~~~