为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第15天 破解JavaScript高级玩法 第一讲

标签:
Vue.js

课程章节: 课程导学

主讲老师: Cloud

课程内容:

今天学习的内容包括:

课程的基本介绍

课程收获:

15.1 心得:

var app = getApp();
Page({
  data: {
    scenicSpot: [],
    num: 1,
    toView: '',
    height: "",
    realHeight: 1,
    imgUrls: [],
    scenicSpotId: ""
  },

  jumpTo: function(e) {
    let target = e.currentTarget.dataset.opt;
    this.setData({
      // num: e.currentTarget.dataset.num,
      toView: target
    });
  },

  getBusinessDetailInfo: function() {
    var that = this;
    wx.showLoading({
      title: "数据加载中..."
    });

    wx.request({
      url: app.getUrl(app.globalData.businessDetailInfo),
      data: {
        scenicSpotId: that.data.scenicSpotId,
      },
      success: function(res) {
        var result = res.data;
        if (result.result) {
          that.setData({
            scenicSpot: result.data
          });

          if (result.data != null) {
            that.setData({
              imgUrls: result.data.Pictures
            });
          }

        }
        wx.hideLoading();
      },
      fail: function(err) {
        wx.hideLoading();
      }, //请求失败
      complete: function() {} //请求完成后执行的函数
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    // 获取系统信息
    wx.getSystemInfo({
      success: function(res) {
        // 计算主体部分高度,单位为px
        that.setData({
          height: res.windowHeight
        })
      }
    })

    that.data.scenicSpotId = options.scenicSpotId;
    that.getBusinessDetailInfo();
  },




  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})
/* pages/scenicIntroduce/scenicIntroduce.wxss */

page {
  background: #fff;
}

.choose_list {
  position: fixed;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  line-height: 1;
  width: 100%;
  top: 0;
  padding: 26rpx 0;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.scenic_introduce {
  display: flex;
  flex-direction: column;
  margin: 0 30rpx 80rpx 30rpx;
}

.choose_left{
  margin-left: 30rpx;
}

.choose_right{
  margin-right: 30rpx;
}

.title {
  display: flex;
  font-size: 36rpx;
  font-weight: bold;
  padding-bottom: 30rpx;
  padding-top: 80rpx;
}

.scenic_inro_title{
  display: flex;
  font-size: 36rpx;
  font-weight: bold;
  padding-bottom: 30rpx;
  padding-top: 120rpx;
}

.text {
  font-size: 26rpx;
}

.image_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.scenic_inro_image {
  width: 340rpx;
  height: 190rpx;
}

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消