微信小程序开发页面总结-文档(ing)

• 微信小程序开发一定要设置实际宽度
• 使用images一定设置宽-
• 使用背景图片(background-image)需要引入线上链接http...
• 注意判断类型

 <text class="video_title">
  {{lisVidindex !=='' ? listData[lisVidindex].name:'暂无视频'}}
</text>

注意：！=’‘和！==’‘的结果不同，!=’‘会把0也包含在内，让你损index=0的数据

• 自定义微信小程序的swiper
  通过改变当前的current--当前所在滑块的 index来实现！其他功能相同原理！

• 网页版样式变化一般通过jq添加类或者动画，微信小程序不能使用jq，所以通过布尔值控制状态来添加类名，需要、动画可以使用@key关键帧
  {{iszfmodal?'mdlbox_show':'mdlbox_hide'}}

• 获取最新的数据使用this.setdata()的回调函数/this.setdata()异步问题

this.setData({
    //...
    },() => {你获取最新数据要干的事情、调去某个函数}
    
})

• 点击切换动画
  A :原理：利用this.setdata()的回调函数和定时器改变布尔值来增加删除类名从而达到效果

/* 动画 */
//xx.wxss
.antonaimate需要加的动画{
  opacity: 0;
  transform: translateX(-40rpx) !important;
  /* transition: all 0.3s linear; */
}

.tab_item_content需要加动画的类{
  transform: translateX(0);
  transition: all 0.3s linear;
}

// xx.wxml
<view class="tab_item_content {{isopacity?'antonaimate':''}}">
  一些需要动画的内容
 </view>

//xx.js
onChangCyTab(optain){

    let that = this;
    that.setData({isopacity:true},()=>{

      setTimeout(()=>{ that.setData({isopacity:false})},500);

      
   //改变文案、手机展示、小tab选项
   
    })
    
  },

• 微信小程序 border-radius overflow不生效

//其实就是兼容问题
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

• video控件属性不起作用（查了好多帖子qaq）
  如：微信小程序video隐藏状态栏
  需要在xx.js的data里设置属性的变量值再赋值过去,直接在wxml里写属性值如false无效

• 微信小程序禁止page或者其他标签滚动

//xx.js
//禁止page滚动，给你调用的函数方法加
wx.setPageStyle({
   style: {
     overflow: 'hidden'
   }
})

//xx.wxml
//禁止不含滚动需求的标签滚动，给标签加行内属性
<view  catchtouchmove="ture">

• 在微信小程序内获取一个标签的值：通过给该标签绑定属性data-xxx=''，然后在点击时通过点击对象e，来获取这个值

 <view data-xxx="{{item.title}}" bindtap="goPage">{{item.title}}</view>
//xx.js
  goPage(e){
    console.log(e,'ppp')
    let value = e.currentTarget.dataset.xxx;
  }

• 获取swiper轮播变动后当前current值

给swiper添加该方法bindchange

• 用变量设置style的值,或者变量需要通过计算得出style的值

<view style="width:{{comment_list.avg_fenshu*20}}%;"></view>

• wx:for 控制循环的个数

 <view  wx:for="{{list}}" wx:if="{{index <3}}" wx:key="index">

</view>

• 页面切换更换头部标题

wx.setNavigationBarTitle({
      　　　　title: 'xxxxx公司' //页面切换，更换页面标题
      })

• 换行符
  微信小程序里换行符不管用，需要使用\n和style="white-space: pre-wrap;"

//eg
 <view style="white-space: pre-wrap;">
左\n滑\n查\n看\n全\n部
</view>

• 标签含有多个情况的判断 全用wx：if，不用else

由于简书在使用时总是出现存储失败导致我同一件事重复存很多遍很浪费时间所以转移阵地csdn，地址如下

http://t.csdn.cn/rTtvu