公告列表
公告列表
收藏
回答

在模板中使用if判断不生效

写一个弹出层，然后再页面上做if判断不生效

上代码和图

初始化：



点击按钮触发函数：



模板代码：


<template name="toast">
    <view class='toast-out' wx:if="{{is_show}}">
        <view class='toast-in'>　　　　　　
            <span  class='iconfont {{iconClass}}'></span>
            <view class='toast-txt'>
                {{txt}}
            </view>
        </view>
    </view>
</template>


函数代码：


test:function(){
  // this.toastShow(this,'登录名不能为空',"icon-suo")
  console.log('================执行自定义函数')
  app.toastShow(this,'登录名不能为空',"icon-suo");
},



app.js中封装的函数


toastShow:function(that,str,icon){
  that.setData({
      is_show: true,
      txt: str,
      iconClass:icon
  });
  setTimeout(function () {    //toast消失
    that.setData({
      is_show: false
    });
  }, 1500); 
}


点击按钮，is_show的值变了，但是页面没有效果展示出来，直接注释掉这些的话页面是会有弹出层的


<template name="toast">
    <view class='toast-out'>
        <view class='toast-in'>　　　　　　
            <span  class='iconfont {{iconClass}}'></span>
            <view class='toast-txt'>
                {{txt}}
            </view>
        </view>
    </view>
</template>





em....新手求解

回答关注问题邀请回答
收藏

2 个回答

  • 工号 9527
    工号 9527
    2018-07-23

    麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

    2018-07-23
    有用
    回复 1
    • 隆
      隆
      2018-07-23

      因为不晓得是系统原因还是什么原因重装过很多次WEB开发工具，都打不开，最后用的是360装的。并且是打开目录下的wechatdevtools.exe才能发开编辑器的。

      然后就是在项目中是看不到代码片段这个功能的。

      为了复现这个问题我新建了一个项目，因为不能直接上传压缩包，我上传下下代码

      1. 新建项目之后，打开/pages/index/index.wxml

        删除全部代码，复制下面代码粘贴


        <button bindtap="test"> 测试 </button>
        <import src="test.wxml" />
        <template is="toast" data="{{txt,ishow,iconClass}}"></template>

      2. 在/pages/index/ 新建 test.wxml 文件，复制下面代码


        <template name="toast">
            <view class='toast-out' wx:if="{{is_show}}">
                <view class='toast-in'>　　　　　　
                    <span  class='iconfont {{iconClass}}'></span>
                    <view class='toast-txt'>
                        {{txt}}
                    </view>
                </view>
            </view>
        </template>

      3. 在 /pages/index/index.js 中添加函 test()


        //index.js
        //获取应用实例
        const app = getApp()
         
        Page({
          data: {
            motto: 'Hello World',
            userInfo: {},
            hasUserInfo: false,
            canIUse: wx.canIUse('button.open-type.getUserInfo'),
            is_show:true
          },
          //事件处理函数
          bindViewTap: function() {
            wx.navigateTo({
              url: '../logs/logs'
            })
          },
          onLoad: function () {
            if (app.globalData.userInfo) {
              this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
              })
            } else if (this.data.canIUse){
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              app.userInfoReadyCallback = res => {
                this.setData({
                  userInfo: res.userInfo,
                  hasUserInfo: true
                })
              }
            } else {
              // 在没有 open-type=getUserInfo 版本的兼容处理
              wx.getUserInfo({
                success: res => {
                  app.globalData.userInfo = res.userInfo
                  this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                  })
                }
              })
            }
          },
          getUserInfo: function(e) {
            console.log(e)
            app.globalData.userInfo = e.detail.userInfo
            this.setData({
              userInfo: e.detail.userInfo,
              hasUserInfo: true
            })
          },
          test:function(){
              app.toastShow(this, '登录名不能为空', "icon-suo");
          }
         
        })

      4. 在根目录下的 app.js中新增对应函数：


        //app.js
        App({
          onLaunch: function () {
            // 展示本地存储能力
            var logs = wx.getStorageSync('logs') || []
            logs.unshift(Date.now())
            wx.setStorageSync('logs', logs)
         
            // 登录
            wx.login({
              success: res => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
              }
            })
            // 获取用户信息
            wx.getSetting({
              success: res => {
                if (res.authSetting['scope.userInfo']) {
                  // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                  wx.getUserInfo({
                    success: res => {
                      // 可以将 res 发送给后台解码出 unionId
                      this.globalData.userInfo = res.userInfo
         
                      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                      // 所以此处加入 callback 以防止这种情况
                      if (this.userInfoReadyCallback) {
                        this.userInfoReadyCallback(res)
                      }
                    }
                  })
                }
              }
            })
          },
          globalData: {
            userInfo: null
          },
         
          toastShow: function (that, str, icon) {
              that.setData({
                  is_show: true,
                  txt: str,
                  iconClass: icon
              });
              setTimeout(function () {    //toast消失
                  that.setData({
                      is_show: false
                  });
              }, 1500);
          }
        })

      5. 在 根目录下的 app.wxss 中添加弹出层样式


        /**app.wxss**/
        .container {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          padding: 200rpx 0;
          box-sizing: border-box;
        }
         
        /* 弹出 */
        .toast-out {
          position: fixed;
          top: 0;
          left: 0;
          z-index: 9999;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .toast-out .toast-in {
          min-width: 100px;
          background: rgba(0, 0, 0, 0.7);
          padding: 6px;
          text-align: center;
          color: white;
          border-radius: 8px;
        }
        .toast-out .toast-in span {
          font-size: 30px;
        }
        .toast-out .toast-in .toast-txt {
          font-size: 14px;
        }

      6. appData调试中看到 is_show 变成 true 但是页面没显示

        具体操作是为了实现：https://www.cnblogs.com/zjjDaily/p/8031953.html

        这个效果来实践的，小程序新手，感谢帮忙

      2018-07-23
      赞
      回复
  • 隆
    隆
    2018-07-23

    编辑器版本是：v1.01.1711160 再升级之后就打不开编辑器，我也很无奈的，所以选择不升级处理

    2018-07-23
    有用
    回复 1
    • 工号 9527
      工号 9527
      2018-07-23

      不如你关掉360，然后升级开发者工具吧

      2018-07-23
      赞
      回复
请 登录 后发表内容
相关问题
相关文档