2018年09月_qq_36437172

12月 11月 10月 09月 07月

原创伪类的使用

对于页面中总会出现一些特别的元素，我们可以通过使用伪类来达到这样的效果。1.某个元素的下划线，表示选择当前元素HTML：<view class="classify-item {{tabIndex == index ? 'active':''}}" wx:key="key" wx:for="{{categories}}" bindtap="tabtap" wx:key="{{i...

2018-09-30 17:11:34 936

转载消除图片间距

<block wx:for="{{goodsImg}}" wx:key="{{index}}"> <image src="{{item}}" class='buy-img' mode='widthFix'></image></block>遍历循环 image 图片，图片之间存在间距给其图片的父元素加上 font-siz

2018-09-30 09:37:43 454

原创小程序带图标的搜索框，按enter进行功能搜索

这里主要说的是输入关键字进行搜索。之前页面设计搜索框都带有搜索按钮进行搜索，没有用过 enter 进行搜索的路过，原谅我不知道还有这个功能。这里主要介绍不带搜索按钮的输入框，通过点击 enter 间进行搜索。HTML:<view class="df search_arr"> <icon class="searchcion" size='16' type='sear...

2018-09-28 15:18:02 6255 1

原创小程序倒计时

倒计时，主要用于商品促销，对商品进行倒计时抢购活动。HTML:<text class="day">{{day}}天{{h}}小时{{m}}分{{s}}秒</text>JS:/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { //倒计时 let getTime = () =&...

2018-09-26 10:22:30 715 1

原创小程序倒计时页面跳转

通常我们打开 APP 时，都会倒计时 5s, 5 s过后自动跳转到相应的页面，进入页面同时，清除原来的页面，同时不带返回箭头。先上效果图：HTML:<view class='container'> <view class="welcome"> <image src="../../img/logo.png"></image&gt...

2018-09-26 10:14:48 4809 6

原创小程序swiper实现icons分页显示--动态计算

先上效果图：HTML:<view class="icons"> <swiper indicator-dots="true" indicator-active-color="rgba(0,175,190,.8)" style='height: 360rpx;'> <swiper-item wx:for="{{iconsSwriper}}&quot

2018-09-26 00:15:22 942 3

原创小程序swiper实现icons分页显示

先上效果图：HTML:<view class='nav-main'> <view class='nav-block'> <swiper indicator-dots="true" indicator-active-color="rgba(0,175,190,.8)" style='height: 400rpx;'> ...

2018-09-25 22:13:45 838

原创小程序 swiper 显示当前页/总页

先上效果图：JS:swiperChange: function(e) { if (e.detail.source == 'touch') { this.setData({ current: e.detail.current }) } },swiper 组件中，current：当前所在滑块的 index（用于计算当前页），...

2018-09-20 14:51:28 6321 3

转载小程序回到顶部

<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}' bindscroll="scrolltoupper"> <view>1</view> <view>2</view> <view>3</view

2018-09-19 15:36:58 558

转载小程序request 请求使用

data: { baidu: null }, onLoad: function (options) { var refs = this; wx.request({ url: 'https://zhidao.baidu.com/question/api/recommend?t=1532415684126', method: "GET"...

2018-09-19 10:13:49 296

原创小程序 textarea 缓存问题更新

之前在页面上写了两个textarea 标签，通过wx:if来判断是否存在缓存来显示对应的 textarea,但是用过的小伙伴，居然发现输入的字体居然双影的，就是说输入框中，对实时监控用户输入信息，两个textarea 都存在页面中吗？我们来说说对于wx:if<textarea placeholder='' bindinput='listenerTextarea' wx:if="{{...

2018-09-18 14:37:23 435

原创关于小程序数据转换传参问题（我遇到的巨坑）

最近小程序在内测准备上线，说说我自己遇到的有些坑。小程序数据转换传参无非就是将JSON对象转换为字符串传递到你接收的页面，在接收的页面中，将字符串转换为JSON对象JSON对象转换为字符串： JSON.stringify字符串转换为JSON对象：JSON.parse很多小伙伴都能成功地传参，转换数据格式也是没有问题的。然而有个小伙伴出现了数据格式转换不成功，立马就慌了，怎么你的数据...

2018-09-18 11:22:12 1480

原创小程序如何把嵌套循环作为对象传参

{"totalPages": 1,"list": [{"storeName": "FOLA测试店","state": "0","storeId": "28a502fac868471dad3e329f01428622","list": [{"normsId": "d10f811863

2018-09-18 09:54:39 850

转载小程序组件页面刷新问题

1.A页面点击跳转到B页面，在B页面操作后A页面应该发生变化，但是实际上我们点击返回的时候我们发现并没有刷新，通过小程序的生命周期函数由onLoad（页面加载）、onReady（页面初次渲染完成）、onShow（页面显示）、onHide（页面隐藏）、onUnload（页面卸载）五个周期构成。问题：如果在onShow中执行this.onLoad()，会导致页面第一次加载的时候数组加载两次！...

2018-09-13 18:26:55 19691 1

原创自定义属性传值

<image bindtap="getUname" data-name="{{ item.uname }}" src="{{ item.avatar }}" />给image标签一个自定义属性 data-XXX ，把你要在js获取的值存进去，例如 data-name="{{ item.uname }}" ，通过 e.currentTarget.dataset.name 获取...

2018-09-09 16:55:18 689

原创购物车计算商品总价

//合计 totalPrice: function () { var list = this.data.goods; var total = 0; 通过 for 循环遍历计算 total值 for (var i = 0; i < list.length; i++) { total += parseFloat(l...

2018-09-09 16:44:52 2809

原创小程序自定义底部导航栏样式

1.微信app.json文件中全局配置小程序API"tabBar": {"color": "#fff","selectedColor": "red","backgroundColor": "skyblue","list": [{"pagePath": "pages/index/index",

2018-09-09 15:59:56 4477 1

原创 promise使用场景

1.异步嵌套问题：wx.request是异步操作，需要一个回调函数来接收（success），回调函数中发起一起wx.request请求----回调地狱2.回调函数剥夺return的能力。// 实例化一个promise对象 let promise = new Promise((resolve, reject) => { wx.request({ ur...

2018-09-08 10:44:51 1232

转载计算两个经纬度的距离

//计算距离Rad: function(d) { return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。},//计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度GetDistance: function(lat1, lng1, lat2, lng2) { var radLat1 = this.Rad(N...

2018-09-04 14:19:13 314

原创小程序textarea缓存问题

<textarea placeholder='' bindinput='listenerTextarea' wx:if="{{textarea}}">{{textarea}}</textarea><textarea placeholder='请输入表达一下你的创意或想法' wx:else bindinput='listenerTextarea'><...

2018-09-04 12:07:32 676

原创小程序单张图片上传至服务器

<view class='itemImg' bindtap="chooseImage"> <image src="{{img}}" data-src="{{item}}" mode="aspectFill" />  <vie

2018-09-04 11:59:13 907

原创小程序返回数据处理问题（一）

1、对于嵌套循环，采用concat拼接wx.request({url: '请求地址',data: {//请求参数},method: 'GET',success: function(res) {var goods = res.data.list;var allArr = [];if (goods) {//将嵌套循环，通过for循环，使用con...

2018-09-04 11:35:45 5301