微信小程序：样式，事件

select框

wxml：

<view class="item_nav_set">
  <view catchtap='item_nav_set_list_display' data-index='0' class="item_nav_set_list {{item_nav_set_list_light[0]}}">
      <view>排序类型</view>
  </view>
  <view catchtap='item_nav_set_list_display' data-index='1' class="item_nav_set_list {{item_nav_set_list_light[1]}}" >
      <view>排序方式</view>
  </view>
</view>
<view class="item_nav_set_list_content {{sort_status[0]}}" >
  <view data-index='0_0' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][0]}}'>时间</view>
  <view data-index='0_1' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][1]}}'>热度</view>
  <view data-index='0_2' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][2]}}'>喜欢</view>
  <view data-index='0_3' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][3]}}'>评论</view>
</view>
<view class="item_nav_set_list_content {{sort_status[1]}}">
  <view data-index='1_0' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[1][0]}}'>正序</view>
  <view data-index='1_1' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[1][1]}}'>倒序</view>
</view>

js:

const app = getApp(); function sort_display (){ return ['sort_hide','sort_hide']; } function item_nav_set_list_light() { return ['','']; } function item_nav_set_list_content_light() { return [ ['', '', '', ''], ['', ''] ]; } Page({ data: { item_nav_set_list_light: item_nav_set_list_light(),  sort_status: sort_display(),  item_nav_set_list_content_light: item_nav_set_list_content_light(), },  item_nav_set_list_display:function (e){  var index = parseInt(e.currentTarget.dataset.index);  var new_sort_display = sort_display(); var new_item_nav_set_list_light = item_nav_set_list_light();  if (this.data.sort_status[index] == 'sort_hide') { new_sort_display[index] = 'sort_show'; new_item_nav_set_list_light[index] = 'item_nav_set_list_light'; } else { new_sort_display[index] = 'sort_hide'; new_item_nav_set_list_light[index] = ''; }  this.setData({ sort_status: new_sort_display, item_nav_set_list_light: new_item_nav_set_list_light }); },  item_nav_set_list_content_display:function (e){ var new_sort_display = sort_display(); var new_item_nav_set_list_content_light = item_nav_set_list_content_light(); var indexArray = e.currentTarget.dataset.index.split('_'); if (indexArray[0] == 0){ new_item_nav_set_list_content_light[0][indexArray[1]] = 'item_nav_set_list_content_light'; new_item_nav_set_list_content_light[1] = this.data.item_nav_set_list_content_light[1]; } else if (indexArray[0] == 1){ new_item_nav_set_list_content_light[1][indexArray[1]] = 'item_nav_set_list_content_light'; new_item_nav_set_list_content_light[0] = this.data.item_nav_set_list_content_light[0]; } this.setData({ sort_status: new_sort_display, item_nav_set_list_content_light: new_item_nav_set_list_content_light }); console.log(new_item_nav_set_list_content_light); } })

wxss:

 .item_nav_set{ height: 45px;  100%; flex-direction:row; background-color: #B0BEC5; position: absolute; top: 40px; z-index: 999; } .item_nav_set_list{ display: inline-block;  50%; text-align: center; line-height: 45px; color: #ffffff; }  .item_nav_set_list_light{ color: #00E5FF ! important; } .item_nav_set_list_content_light{ color: #00E5FF ! important; background-color: #CFD8DC! important; } .item_nav_set_list_content{ padding-top: 85px;  100%; z-index: 1; position: absolute; transition: transform .8s; transform:  translateY(-100%); } .item_nav_set_list_content>view{ height: 40px; line-height: 40px; color: #c0c0c0; text-align: center; background-color: #ECEFF1; border-bottom: 1px solid #fff; } .sort_show{ transform: translateY(0); -webkit-transform: translateY(0); } .sort_hide{ transform: translateY(-100%); -webkit-transform: translateY(-100%); }

复制，改样式，ok_________________

一、小程序样式：

1.view{/*或者line-height*/
   display: flex;
   align-items: center;/*垂直居中*/
   justify-content: center;/*水平居中*/
}
2.image{/*图片底下有空白解决办法*/
   width: 100%;
   vertical-align: middle
}
3.text{/*文字加中间线*/
   text-decoration:line-through；
}

二、小程序事件：

Δ三种跳转：
1.我的小程序中主页面和我的信息页面分别是两个Tab页，所以无法

通过调用wx.navigateTo实现页面跳转，而应该使用wx.switchTab。

至此，将.js文件中的wx.navigateTo方法改为wx.switchTab，路由跳

转成功。
<view bindtap='jumpUrl'></view>
jumpUrl: function () {
    wx.switchTab({
      url: '../index/index',
    })
  },
2.<navigator url='../test/test'>点击跳转</navigator>
3.跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;


Δ微信小程序 保留两位小数
1.新建一个util.wxs文件，内容：
var numberUtil = { 
numberFormat: function (value) { 
  var v = (Math.floor(value/1000 * 1000) / 1000)//保留二位小

数的话，后边两个1000都改为100，以此类推
  return v
} 
} 
module.exports = { 
numberFormat: numberUtil.numberFormat 
}
2.在wxml文件中导入

 <wxs module="numberUtil" src="../../utils/util.wxs"></wxs>
3.模板中使用

<view>金额：{{numberUtil.numberFormat(123.5678)}}</view>


Δwx.setStorage({})全局存储  wx.getStorageSync() 读取全局存

储数据
wx.setStorage({//设置全局存储
   key: 'id',
   data: '1234',
})

var id = wx.getStorageSync('id');//读取全局存储数据,id=1234

Δ  模板循环数组后，根据wx:for-index="bindex" data-bindex="bindex"显示数组的索引，根据是否是数组的最后一条来给view加一id属性

<view class='pay_list_ve' wx:for="{{productData}}" wx:for-index="bindex" data-bindex='{{bindex}}' id="{{productData.length-1 == bindex?'pay_list_veid':''}}"></view>
//也可wx:if=""加入判断

 Δ 小程序js截取字符串长度

//截取字符串长度
    var that = this;
    var basic = "测试字符串测试字符串测试字符串测试字符串";
    if (basic.length >= 20){
      var strb = basic.substr(0, basic.length - 1);
      var strbs = strb+'...';
    }else{
      var strbs = basic;
    }
    console.log(strbs)
    //截取字符串长度

Δ 小程序js循环数组并截取字符串长度

//循环截取字符串
for (var i = 0; i < res.data.body.orderProducts.length; i++) {
  var test = res.data.body.orderProducts[i];
  if (test.productName.length >= 18){
    test.productName = test.productName.substr(0,18)+'...';
  }
} 
//循环截取字符串 end
that.setData({
  orderDetail: res.data.body,
  oddetlist: res.data.body.orderProducts
})

 

Δ点击返回顶部

 wx.pageScrollTo({
  scrollTop: 0
 })

Δ分享

wxml
<button class='sp_share_btn_top' open-type='share'></button>

js
onShareAppMessage: function () {
    var that = this;
    return {
      title: '标题',
      desc: '商品名称',
      path: '/pages/productDetail/productDetail?id=' + that.data.productId
    }
  },

Δ点击显示和隐藏(3秒后自动隐藏)

wxml:

<view class='button-1' bindtap='shView'>1</view>
<view class="{{showView?'button-2 hide':'button-2'}}">2</view>
<view class="{{showView?'button-3 hide':'button-3'}}">3</view>

wxss:

page{
  width: 100%;
  height: 100%;
  position: relative;
  background: #cccccc;
}
.show{
  display: block;
}
.hide{
  display: none;
}
.button-1{
  position: absolute;
  background: #000000;
  color: #fff;
  line-height: 60px;
  text-align: center;
  top: 50px;
  left: 50px;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  opacity: 0.8;
  z-index: 9
}
.button-2{
  position: absolute;
  background: #000000;
  color: #fff;
  line-height: 60px;
  text-align: center;
  top: 0;
  left: 85px;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  opacity: 0.8;
  z-index: 9
}
.button-3{
  position: absolute;
  background: #000000;
  color: #fff;
  line-height: 60px;
  text-align: center;
  top: 100px;
  left: 85px;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  opacity: 0.8;
  z-index: 9
}

js:
//index.js
Page({
  data: {
    showView:true//模板判断元素是否隐藏
  },
  shView:function(){//点击button-1显示button-2和3
    var that = this;
    that.setData({
      showView:false
    });
    setTimeout(function () {//点击显示之后，在3秒后自动隐藏
      that.setData({
        showView: true
      })
    }, 3000);
  }
})

 Δ提示框

wx.showToast({
     title: 'abc!',
     icon: 'none',
     duration: 2000
});

Δ 禁止滚动

wxml:
<view class='testg' catchtouchmove="myCatchTouch">

js:
//禁止元素点击的时候上下滚动
  myCatchTouch: function () {
    //console.log('stop user scroll it!');
    return;
 },

 Δ微信小程序验证码6位数/多位验证码输入框

wxml:

<form bindsubmit="formSubmit"> 
  <view class='content'>
    <block wx:for="{{Length}}" wx:key="item">
      <input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input>
    </block>
  </view>
  <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
  <view>
    <button class="btn-area" formType="submit">Submit</button>
  </view>
</form>

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    Length: 6,        //输入框个数
    isFocus: false,    //聚焦,开启后进入页面自动弹出输入框
    Value: "",        //输入的内容
    ispassword: true, //是否密文显示 true为密文， false为明文
  },
  Focus(e) {
    var that = this;
    console.log(e.detail.value);
    var inputValue = e.detail.value;
    that.setData({
      Value: inputValue,
    })
  },
  Tap() {
    var that = this;
    that.setData({
      isFocus: true,
    })
  },
  formSubmit(e) {
    console.log(e.detail.value.password);
  },
})

wxss:

.content{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 200rpx;
}
.iptbox{
   80rpx;
  height: 80rpx;
  border:1rpx solid #ddd;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ipt{
   0;
  height: 0;
}
.btn-area{
   80%;
  background-color: orange;
  color:white;
}

 Δscroll-view 左右横向滑动没有效果（无法滑动）问题

（转）小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试发现：
1.scroll-view 中的需要滑动的元素不可以用 float 浮动；

2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；

4.包裹 scroll-view 的大盒子有明确的宽和加上样式-->  overflow:hidden;white-space:nowrap;

wxml:
<view class="scroll_box"> 
    <scroll-view class="scroll-view_x" scroll-x style=" auto;overflow:hidden;">

      <view class="item_list" wx:for="{{list}}">
        <image src="../../images/head.jpg" class="item_book_img" mode="aspectFill"></image>
        <view class="item_book_text">测试数据</view>
      </view>
     
    </scroll-view>
  </view>

wxss:
.scroll_box{
 100%;
height: 307rpx;
overflow: hidden;
padding: 20rpx;
background: #fff;
white-space: nowrap;
}
.item_list{
 160rpx;
height: auto;
margin-right: 23rpx;
display: inline-block;
}

 Δ微信小程序swiper组件滑动卡死现象解决(转)替换自己设置的current=""值即可

wxml:
<swiper bindanimationfinish="changeGoodsSwip" current="{{goodsIndex}}">

js:
changeGoodsSwip: function (detail) {
    if (detail.detail.source == "touch") {
        //当页面卡死的时候，current的值会变成0 
        if(detail.detail.current == 0){
            //有时候这算是正常情况，所以暂定连续出现3次就是卡了
            let swiperError = this.data.swiperError
            swiperError += 1
            this.setData({swiperError: swiperError })
            if (swiperError >= 3) { //在开关被触发3次以上
                console.error(this.data.swiperError)
                this.setData({ goodsIndex: this.data.preIndex });//，重置current为正确索引
                this.setData({swiperError: 0})
            }
        }else {//正常轮播时，记录正确页码索引
            this.setData({ preIndex: detail.detail.current });
            //将开关重置为0
            this.setData({swiperError: 0})
        }
    }
}

——————————————————————————————