微信小程序技巧记录
1.直接在app.json中添加pages,会自动按照路径生成page目录文件;
2.动态修改样式:
/**
* 页面的初始数据
*/
data: {
authorInfo: [],
article: [],
index: [],
attentionBackgroundColor: 'white',
attentionTextColor: 'black'
}, attentionAction: function() {
wx.showToast({
title: '关注成功',
});
// 动态设置颜色和背景
var that = this;
var bgColor = this.data.attentionBackgroundColor == 'red' ? 'white' : 'red';
var textColor = this.data.attentionTextColor == 'black' ? 'white' : 'black';
// 设置背景颜色数据
this.setData({
attentionBackgroundColor: bgColor,
attentionTextColor: textColor
});
},
设置样式处:
<view class='follow' bindtap='attentionAction' style='background-color:{{attentionBackgroundColor}};color: {{attentionTextColor}}'>
关注
</view>
3.下拉刷新,上拉加载:
app.json设置enablePullDownRefresh:
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "网易蜗牛读书",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true
},
当前页设置enablePullDownRefresh为true。
js实现下拉刷新,上拉加载:
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
wx.showNavigationBarLoading() //在标题栏中显示加载 //模拟加载
setTimeout(function () {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, );
}, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('加载更多');
var that = this;
setTimeout(() => {
wx.request({
url: 'https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo',
success: function (res) {
console.log(res.data.data.index);
console.log(res.data.data.articleInfo);
that.setData({
isHideLoadMore: true,
authors: res.data.data.index,
id: res.data.data.articleInfo
})
wx.hideLoading();
}
})
}, );
},
微信小程序技巧记录的更多相关文章
- 微信小程序bug记录与解决
微信小程序bug记录 textarea textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工 ...
- 微信小程序开发 记录
采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因 ...
- 微信小程序学习记录(一)
如何定义一个全局变量: 1,在根目录下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_currentMusicPostId :nul ...
- 微信小程序配置文件记录
最近公司要求,需要研究微信方面的问题,我有幸被选中了,一周时间,研究透做出个小程序来.我就从简单的开始了,记录一下,以后忘了,好来翻阅 app.json 配置文件 配置文件上写:是由哪些页面组成,配置 ...
- [微信小程序]——bug记录
记录日常开发小程序遇到的一些小问题: input 输入框(unfixed) 描述:输入框focus的时候,placeholder会往上面跳动一下 当 scroll-view 遇上 fixed 描述:给 ...
- 【微信小程序】记录
学习新东西时,大体都遵循一样的道理,由总入深. 以下整理一下学习小程序的过程.虽然现在做的东西还有许多问题,比如说数据超过一定数量时循环效率低,或者是多次跳转页面后会变卡等问题.这些问题只解决了部分, ...
- 微信小程序开发记录
顶栏banner代码 /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-it ...
- 微信小程序 错误记录
1.报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api req ...
- 原创:从零开始,微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...
随机推荐
- YAML_16 debug检测
ansible]# ansible-playbook --syntax-check http.yml //检测语法 playbook: http.yml ansible]# ansible-play ...
- (尚013)Vue的生命周期
三个阶段: 一.初始化显示; 二:更新显示 三.死亡 每一个阶段都对应生命周期的回调函数(也叫勾子函数) 生命周期图示: 1. 2.test013.html <!DOCTYPE html> ...
- 计蒜客模拟赛 #5 (B 题) 动态点分治+线段树
虽然是裸的换根dp,但是为了在联赛前锻炼码力,强行上了点分树+线段树. 写完+调完总共花了不到 $50$ 分钟,感觉还行. code: #include <bits/stdc++.h> # ...
- ES单机版安装
1.安装JDK(1.8)2.上传解压Elasticsearch-5.4.33.创建一个普通用户,然后将对于的目录修改为普通用户的所属用户和所属组4.修改配置文件config/elasticsearch ...
- shell编程题(三)
将一目录下所有的文件的扩展名改为bak #! /bin/bash for i in `ls` do mv $i ${i%%.*}.bak done ${i%%.*} 截掉一个变量字符串第一个" ...
- java学习笔记(3)数据类型、源码、反码、补码、精度损失、基本数据类型互相转换
关于java中的数据类型: 1.数据类型的作用是什么? 程序当中有很多数据,每一个数据都是有相关类型的,不同数据类型的数据占用的空间大小不同. 数据类型的作用是指导java虚拟机(JVM)在运行程序的 ...
- Tkinter 之ProgressBar进度条标签
一.参数说明 参数 作用 cursor 鼠标位于进度条内时的形状 length 进度条长度 maximum 进度条最大刻度值 mode 进度条的模式.有两种:‘determinate’和’indet ...
- windows下使用xortools
xortool是一个多字节异或加密破解工具.作者只是适配了linux版,在Windows下使用会导致保存文件错误,因为Windows会把\n转成\r\n,加密和解密都乱了.而且命令还和readme不一 ...
- 生产者消费者模型Java实现
生产者消费者模型 生产者消费者模型可以描述为: ①生产者持续生产,直到仓库放满产品,则停止生产进入等待状态:仓库不满后继续生产: ②消费者持续消费,直到仓库空,则停止消费进入等待状态:仓库不空后,继续 ...
- Assignment2:因果图法的介绍与示例分析
一. 黑盒测试:是一种常用的软件测试方法,它将被测软件看作一个打不开的黑盒,主要根据功能需求设计测试用例,进行测试.几种常用的黑盒测试方法和黑盒测试工具有,等价类划分法.边界值分析法.因果图法.决策表 ...