微信小程序入门使用及常见问题整理（例如：scroll-view 横向滑动不生效）

常用功能同vue的对比

1、数据绑定

Vue :src=“imgSrc”
Xcx: src=“{{imgSrc}}”

2、列表渲染

Vue v-for=“item in items”. 每项数据是{{item}}
xcx wx:for=“{{items}}” 每项数据是{{item}}

3、显示和隐藏

Vue v-if、v-show
Xcx: wx-if、hidden

4、事件处理

vue @click、冒泡:@click.stop
xcx bindtap=“事件名” catchtap=“事件名”

5、数据绑定

vue v-model=“reson”
xcx 方法里面加bindReson(e){this.setData({resin:e.detal.value})} //这个e其实就是绑定方法的数据bindReson(e){}

6、取值

Vue this.reson
Xcx: this.data.reson

7、事件传参

vue @click=“bindReson(’tomi’)"
Xcx 不提倡方法传参数、使用属性data-id=“{{item.id}}” 然后方法里面通过e.currentTarget.dataset.*

问题

1、scroll-view 横向滑动不生效原因

• 父组件必须设置宽度且设置不换行
  [width: 100%;overflow: hidden;white-space: nowrap;]
• 子元素必须是行内元素[display:inline-block]

2、使用onshow初始化页面,路由返回页面之后页面会重新加载,使用onload就不会重新加载

3、关于盒子宽度(设置宽度样式兼容的坑巨多)

• 一般情况不设置100%的宽度,否则就算设置了
  box-sizing:border-box margin值也会超出
• 需要宽度设置的能不设置就不设置,小程序会默认宽度是100%

4、路由跳转设置参数会被解析截断

• 最好的方式是使用onload(options)将参数获取使用

5、navigateTo在点击多次之后就会失效

• 后来查阅资料发现navigateTo只会保留5层，所以就索性将全部换成了wx.redirectTo()；
• tabar里面的页面无法在内部进行跳转

6、变量直接赋值失败

有时候会数据初始化失败

this.data.detail = foodLists.foodList[id];
// 修改成这种形式即可
this.setData({detail: foodLists.foodList[id]});

参考

https://segmentfault.com/a/1190000015684864

最后

以上就是朴素手机为你收集整理的微信小程序入门使用及常见问题整理（例如：scroll-view 横向滑动不生效）的全部内容，希望文章能够帮你解决微信小程序入门使用及常见问题整理（例如：scroll-view 横向滑动不生效）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。