文章目录
-
-
- 零基础独立研发小程序遇到的坑及解决总结
-
- 1、小程序在Mac导入时打不开?
- 2、scroll-view列表中item点击事件设置
- 3、小程序页面之间的跳转
- 4、小程序 swiper(或者 scroll-view) 隐藏滚动条
- 5、微信小程序下拉刷新/上拉加载更多实现
- 6、微信小程序 --- model弹框
- 7、小程序 同一个字符串不同颜色设置
- 8、微信小程序 position: absolute位置错乱问题
- 9、微信小程序设置圆形图片
- 10、当点击分享按钮时会触发到父级的 bindtap 事件,该如何解决这个问题呢?
- 11、微信小程序去除button边框
- 12、小程序隐藏元素的几种方式
- 13、小程序固定底部、居中的悬浮按钮
- 14、微信小程序开发常用技巧 —— 修改page背景色
- 15、微信小程序计算input框输入的长度以及绑定输入事件
- 16、微信小程序 如何获取列表item中按钮的index???
- 17、微信小程序多层嵌套循环,二级数组遍历
-
零基础独立研发小程序遇到的坑及解决总结
1、小程序在Mac导入时打不开?
解决:目录结构里面有中文目录导致的
2、scroll-view列表中item点击事件设置
.wxml添加:
<scroll-view scroll-y = "{
{true}}" style="height:{
{windowHeight}}px" bindscrolltoupper="upper" bindscrolltolower="lower">
<block wx:for = "{
{newslist}}">
<view style='width:100%' bindtap='clickitem' data-index="{
{index}}">
<image src='{
{item.newsimg}}' style='width:100px;height:100px;overflow:hidden;display:inline-block;float:left'></image>
<view style='float:left;width:250px'>
<text style='display:block'>title :{
{item.newstitle}}</text>
<text style='display:block'>author :{
{item.newsauthor}}</text>
<text style='display:block'>time :{
{item.newstime}}</text>
</view>
<view style='clear:both;display:block;height:10px;background-color:white'/>
</view>
</block>
</scroll-view>
.js添加:
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
windowHeight:100,
newslist:[
{newstitle:"title1",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor:"zuozhe1",
newstime:"newstime1"},
{
newstitle: "title2",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe2",
newstime: "newstime2"
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//设置scroll-view高度
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
});
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
upper:function(){
console.log("======uppperupper========");
},
lower:function(e){
console.log("========lowerlower============");
},
clickitem:function(e){
var position = e.currentTarget.dataset.index;
console.log("================"+position);
}
})
3、小程序页面之间的跳转
3.1 wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回;
示例:
wx.navigateTo({
url:'../test/test?id=1&page=4', //跳转页面的路径,可带参数 ?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀
success:function(){} //成功后的回调;
fail:function(){} //失败后的回调;
complete:function(){} //结束后的回调(成功,失败都会执行)
})
// 传递的参数在接收页面onLoad()函数中得到值:option.id就可以得到了
onLoad: function (option) {
console.log(option)//可以打印一下option看查看参数
this.setData({
id:option.id,
});
3.2 wx.redirectTo() , 关闭当前页面,跳转到非tabBar的某个页面,
3.3. 使用组件 示例: 点击跳转
3.4. wx.switchTab ,跳转到tabBar的某个页面,
wx.switchTab({
url: '../taste/index', //注意switchTab只能跳转到带有tab的页面,不能跳转到不带tab的页面
})
4、小程序 swiper(或者 scroll-view) 隐藏滚动条
在.wxss 添加:
// scroll-view隐藏滚动条方法
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
// swiper隐藏滚动条方法
.tab-swiper ::-webkit-sc