小程序开发

_ForeverYouth_

已于 2022-01-20 15:51:18 修改

阅读量445

点赞数

分类专栏：小程序文章标签：微信小程序小程序前端

于 2021-12-22 11:48:59 首次发布

本文链接：https://blog.csdn.net/Kavii_a/article/details/122082327

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

小程序开发

json

去除小程序自带navigation

"navigationStyle":"custom"

修改手机状态栏颜色

"navigationBarTextStyle": "white

禁止当前页面滚动

"disableScroll": true

wxml

暂无

wxss

微信小程序表格实现css

.su-table-box {
  height: 100%;
  margin: 0rpx 30rpx;
  overflow-x: auto;
  padding-bottom: 40rpx;
}
.su-table-box .su-table {
  margin-top: 50rpx;
  display: table;
  border-collapse: collapse;
  overflow-x: auto;
  word-break: keep-all;
  white-space: nowrap;
  background-color: #ffffff;
}
.su-table-box .su-tr {
  display: table-row;
}
.su-table-box .su-th {
  padding: 0 30rpx;
  display: table-cell;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1rpx solid #dddddd;
  background-color: #f5f5f5;
}
.su-table-box .su-td {
  padding: 0rpx 30rpx;
  display: table-cell;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1rpx solid #dddddd;
}

<view class="su-table-box">
   <view class="su-table">
	<!-- 表格标题 -->
	<view class="su-tr">
		<view class="su-th" v-for="(list,index) in th" :key="index">{{list}}</view>
	</view>
	<!-- 表格内容 -->
	<view class="su-tr" v-for="(list,index) in td" :key="index">
	    <view class="su-td" v-for="(item,index_) in list" :key="index_">{{item}}</view>
	</view>
    </view>
</view>

隐藏scroll-view滚动条

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}

js

获取某个元素或组件距离顶部的初始高度

wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
}).exec()

返回上一个页面并传递参数

//获取当前页面pages里的所有信息。
let pages = getCurrentPages(); 
//prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
let prevPage = pages[pages.length - 2]; 
// 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
prevPage.setData({  
  id: this.data.orderInfo.id
})
//上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。

//最后就是返回上一个页面。
wx.navigateBack({
  delta: 1  // 返回上一级页面。
})

处理 iphoneX 以上的机型计算底部安全区域

  handleIphoneX: function() {
    const { screenHeight, safeArea: { bottom }} = wx.getSystemInfoSync()
    this.globalData.bottomLift = screenHeight - bottom
    // console.log(this.globalData.bottomLift);
  },

<view style="padding-bottom: {{ bottomLift }}px"></view>

scroll-view设置下拉刷新上拉触底

<scroll-view
    refresher-enabled
    refresher-triggered="{{ isTriggered }}"
    refresher-background="#f8f8f8"
    bindrefresherrefresh="handleRefresh"
    bindscrolltolower="handleToLower">
    ==== 滚动数据 ====
</scroll-view>

// 下拉刷新
handleRefresh() {
    console.log('下拉刷新');
},
// 上拉触底
handleToLower() {
	console.log('上拉触底');
},

动态绑定输入框的值

<!-- 手机号 -->
<van-field
    label="手机号"
    placeholder="请输入手机号"
    id="form.phone"
    value="{{ form.phone }}"
    bind:input="handleInput"
/>
<!-- 密码 -->
<van-field
    label="密码"
    placeholder="请输入密码"
    id="form.password"
    value="{{ form.password }}"
    bind:input="handleInput">
</van-field>

data: {
	form: {
        phone:'',
        password: ''
    }
}
handleInput(e) {
    const { id:type } = e.currentTarget
    this.setData({
        [type]: e.detail
    })
}

引入lodash

新建fix.js

global.Object = Object
global.Array = Array
// global.Buffer = Buffer 这个用不了
global.DataView = DataView
global.Date = Date
global.Error = Error
global.Float32Array = Float32Array
global.Float64Array = Float64Array
global.Function = Function
global.Int8Array = Int8Array
global.Int16Array = Int16Array
global.Int32Array = Int32Array
global.Map = Map
global.Math = Math
global.Promise = Promise
global.RegExp = RegExp
global.Set = Set
global.String = String
global.Symbol = Symbol
global.TypeError = TypeError
global.Uint8Array = Uint8Array
global.Uint8ClampedArray = Uint8ClampedArray
global.Uint16Array = Uint16Array
global.Uint32Array = Uint32Array
global.WeakMap = WeakMap
global.clearTimeout = clearTimeout
global.isFinite = isFinite
global.parseInt = parseInt
global.setTimeout = setTimeout

然后去下载lodash，然后再app.js导入

import './lodash/fix'
import _ from './lodash/lodash.min'

globalData: {
    _,
}

使用

const { _ } = getApp().globalData

获取当前页面

getCurrentPages().pop()

VantWeapp组件库开发问题

van-tabs

注意这个组件绑定的 active 必须要是 number类型

<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
</van-tabs>

定制主题

比方说要修改tabbar徽标的颜色，首先找到它的样式，background-color就是徽标的颜色，然后可以看到

–info-background-color，我们直接修改就好了

在这里插入图片描述

新建var.wxss

.van-info{--info-background-color:#8f1a22}

然后在app.wxss中导入就行了

购物车解决事件冒泡

在这里插入图片描述

需求：点击商品名字或者图片或者中间部分跳转商品详情页

但是不解决冒泡的话，在选中或者加减商品的时候都会进入详情页，这时需要解决冒泡

<view
      class="goods-card-wrap"
      data-id=""
      data-product=""
      bindtap="toGoodsDetail">
    
<view mark:stepper="checkbox">
	<van-checkbox 
	id=""
    class="goods-checked"
    checked-color=""
    value=""
    bind:change="onChangeGoodsChecked" />
</view>

<van-card
	class="goods-card"
	price=""
	desc=""
	title="">

	<view mark:stepper="stepper" slot="num">
		<van-stepper
			id=""
            value=""
            max=""
            bind:change="onChangeGoodsNum" />
    </view>

    <view slot="thumb">
    	<van-image 
         width="160rpx"
         height="160rpx"
         fit="cover"
         src="" />
        <van-icon wx:else name="photo-o" size="160rpx" color="#cccccc" />
    </view>
              
</van-card>
</view>

解决方法就是在组件上再套一层view，然后设置 mark:stepper,然后点击事件时候判断

// 跳转商品详情
  toGoodsDetail(e) {
    // 用mark防止事件冒泡 以防在选中商品 或者加减商品的时候跳转到详情页去
    if(e.mark.stepper === undefined && e.mark.checkbox === undefined) {
      // 这里做操作跳转详情页
    }
  },