出现的弹窗总是透明,很不爽,应该是bug,有截图,有源码
发布于 5 年前 作者 huming 7950 次浏览 来自 问答

请诊断一下是否是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 () {

}

})

1 回复

下面是代码片段,单击可以直接在本地开发环境中测试,刚学会,大家看看啊,一定要输入数据

wechatide://minicode/xS61NNmf6aZn

有人回答问题吗?

回到顶部