关于小程序中经常遇到的问题（1）

我们一般用MVVM框架给data里的变量赋值或者修改的时候直接this.name='小鹿'，而在小程序中规定：修改data的值只能是this.setData({name=’小鹿’})，但是可以this.yourfunction。
在app.json的文件的tabBar注册过的页面跳转的时候只能用 wx.switchTab ({})
小程序的生命周期

//获取应用实例
var app = getApp();
Page({
  //通过data初始化数据
  data: {
    userInfo: {}
  },
  //事件处理函数--页面跳转
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },

  //监听页面开在加载的状态页面加载完成之后就不会在执行
  onLoad: function () {
    console.log('index---------onLoad()')
  },

  //监听页面显示(比如从后台进入页面):当从当前页面调转到另一个页面,另一个页面销毁时会再次执行
  onShow: function() {
    console.log('index---------onShow()')
  },

  // 监听页面渲染完成之后不会在执行
  onReady: function() {
    console.log('index---------onReaday()');
  },

  //监听页面隐藏（比如进入后台时）,当前页面调到另一个页面时会执行
  onHide: function() {
    console.log('index---------onHide()')
  },

  // 当页面销毁时调用
  onUnload: function() {
    console.log('index---------onUnload')
  }

})

4.小程序的自定义属性

 <view  bindtop='chooseItem' data-goodsId='item.goods_id' ></view>

 chooseItem:function(e){
    console.log(e);
    console.log( e.currentTarget.dataset.goodsId);
  },

5.关于小程序swiper轮播

movies:[    
      {url:'http://img.inman.com.cn/uploads/20180414/14172143.jpg'} ,    
      {url:'http://img.inman.com.cn/uploads/20180414/14215197.jpg'} ,    
      {url:'http://img.inman.com.cn/uploads/20180414/14254476.jpg'}
      ]


<view class="swiper">
    <swiper class="swiper2" indicator-dots="true" autoplay="true" interval="1500" duration="1000" circular="true">    
        <block wx:for="{{movies}}" wx:key="index">    
          <swiper-item>    
            <image src="{{item.url}}" class="slide-image" class="swiperImg"/>    
          </swiper-item>    
        </block>    
    </swiper>
</view>

.swiper2{
  height: 180px;
}
.swiperImg{
  width: 100%;
}

4.关于图片的横向拖动，把wxml和wxss部分代码直接复制下面的代码运行小程序即可查看效果

<view class="scrool-left">
  <scroll-view scroll-x="true" class="showmian">
    <view bindtap="chooseItem" class="upload_Item" data-index="1">
      <view class="icon_box"><text class="icon_text">4.7折</text><image class="icon_1" src="../../img/icon_1.png"></image></view>
      <image class="upload_Item_img" src="http://img.inman.com.cn/uploads/20180412/17532921.jpg"></image>
      <view class="goodsName">拼接蕾丝衫</view>
      <view class="sprice">闪购价:<small class="ii">￥</small>79.00<small class="num">￥160.00</small></view> 
    </view> 
    <view bindtap="chooseItem" class="upload_Item" data-index="1">
      <view class="icon_box"><text class="icon_text">3.8折</text><image class="icon_1" src="../../img/icon_1.png"></image></view>
      <image class="upload_Item_img" src="http://img.inman.com.cn/uploads/20180412/17494632.jpg"></image>
      <view class="goodsName">收腰显瘦连衣裙</view>
      <view class="sprice">闪购价:<small class="ii">￥</small>99.00<small class="num">￥259.00</small></view> 
    </view>
    <view bindtap="chooseItem" class="upload_Item" data-index="1">
      <view class="icon_box"><text class="icon_text">3.6折</text><image class="icon_1" src="../../img/icon_1.png"></image></view>
      <image class="upload_Item_img" src="http://img.inman.com.cn/uploads/20180412/17531036.jpg"></image>
      <view class="goodsName">简约文艺连衣裙</view>
      <view class="sprice">闪购价:<small class="ii">￥</small>119.00<small class="num">￥329.00</small></view> 
    </view>
    <view bindtap="chooseItem" class="upload_Item" data-index="1"> 
      <text class="checkM">查看</text>
      <text class="checkMore">更多</text>
    </view> 
  </scroll-view>
</view>

.scrool-left{background: #fff;border-bottom: 1px solid #f1f1f1;}
.showmian{ 
  background: #fff;
  margin: 0 auto; 
  width: 100%; 
  white-space: nowrap; 
  display: block
}
.upload_Item{ 
  text-align: left;
  font-size:28rpx;
  position: relative; 
  width: 167px;
  height:272px;
  display: inline-block;
  border-right: 1px solid #f1f1f1;
}
.upload_Item_img{ 
  width: 100%;
  height: 214px;
}
.icon_box{
  width: 36px;
  height: 25px;
  position: absolute;
  right: 0;
  top: 0;
}
.icon_1{
  z-index: 1;
  position:absolute;
  left:0px;
  width: 36px;
  height: 25px;
}
.icon_text{
  z-index: 2;
  position:absolute;
  left:2px;
  top: 2px;
  font-size: 12px;
  color: #fff;
}
.goodsName{
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 3px;
  color: rgb(22, 22, 22);
}
.sprice{
  color: #f97373;
  margin-left: 3px;
}
.ii{
  font-size: 10px;
  padding-left: 4px;
}
.num{
  font-size: 10px;
  color: #999;
  text-decoration: line-through;
  padding-left: 3px;
}
.checkM{
  position: absolute;
  top:39%;
  left: 43%;
  color: #999;
}
.checkMore{
  position: absolute;
  top:45%;
  left: 43%;
  color: #999;
}

关于小程序中经常遇到的问题（1）

猜你喜欢