鳕鱼天空

This is Mr Wang's Tech Blog.

微信小程序 页面监听全局变量的变化

前言

在前段时间的开发过程中,遇到了一个需要监听是否有推送的需求,需要在不同的页面监听全局变量从而进行条件渲染,因此总结了一下便有了下篇文章.

介绍

当我们开发一个大型的微信小程序时,通常会涉及到多个页面或组件之间的数据传递和共享,而全局变量可以方便地实现这一需求。但是当全局变量的值发生变化时,我们需要及时地更新页面或组件的数据,以保证用户界面的实时性。这时候,我们就需要用到监听器的机制。

监听器是一种设计模式,用于在对象状态发生改变时,自动调用特定的函数。在微信小程序中,我们可以通过定义一个全局变量来存储所有的监听器函数,并在需要监听的页面或组件中注册监听器函数,以实现对全局变量的监听。当全局变量的值发生改变时,我们就可以通过遍历所有的监听器函数,并依次调用这些函数,及时更新页面或组件的数据。

示例

下面是一个在微信小程序中实现监听器机制的示例代码:

在 App.js 中定义全局变量和注册监听器方法

App({
  globalData: {
    currentUser: null, // 全局变量 currentUser
    listeners: [], // 存储监听器函数的数组
  },
  // 注册监听器函数的方法
  registerListener: function (listener) {
    this.globalData.listeners.push(listener);
  },
  // 触发监听器函数的方法
  triggerListeners: function () {
    var listeners = this.globalData.listeners;
    for (var i = 0; i < listeners.length; i++) {
      listeners[i]();
    }
  }
})

在需要监听的页面或组件中注册监听器函数

Page({
  onLoad: function () {
    // 注册监听器函数
    getApp().registerListener(this.onCurrentUserChange.bind(this));
  },
  onCurrentUserChange: function () {
    // 全局变量 currentUser 的值发生改变时,调用该函数
    this.setData({
      currentUser: getApp().globalData.currentUser
    })
  }
})

在全局变量发生改变时触发监听器函数

getApp().globalData.currentUser = {
  name: '小明',
  age: 20
};
getApp().triggerListeners();

 

创建iconfont,并在微信小程序中使用

iconfont 官网 https://www.iconfont.cn/,可以使用github,或者微博账号登录

点击资源管理,我的图标,可以上传图标,本次制作了4个软镖中使用到的米老鼠的图标,发现了一些问题,就是线条的粗细在字体中无法使用,还是要用轮廓围起来然后填充

先用AI进行了初步的×的绘制,圆环就需要手动了,先附上参考网址

SVG 的平移、旋转和缩放

菜鸟教程在线编辑

由于不擅长设计软件,就用画3D模型的犀牛绘制了圆环的线条,然后手动测出了点的位置并用excel转换出绝对坐标:

用非常土的方法绘制出了一段圆环,

<path d="M 43.041 35.970 
L 35.913 28.842 
A 45 45 0 0 1 92.087 28.842 
L 84.959 35.970 
A 35 35 1 0 0 43.041 35.970" 
fill="#000000"/> 

接着用旋转的方法画出了另外三条

 transform="translate(128,0)rotate(90)"
transform="translate(128,128)rotate(180)"
transform="translate(0,128)rotate(-90)"

附上完整代码:

<svg x="0px" y="0px" width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 43.041 35.970 
  L 35.913 28.842 
  A 45 45 0 0 1 92.087 28.842 
  L 84.959 35.970 
  A 35 35 1 0 0 43.041 35.970" fill="#000000"/>
<g transform="translate(128,0)rotate(90)">
<path d="M 43.041 35.970 
  L 35.913 28.842 
  A 45 45 0 0 1 92.087 28.842 
  L 84.959 35.970 
  A 35 35 1 0 0 43.041 35.970" fill="#000000" />
</g>
<g transform="translate(128,128)rotate(180)">
<path d="M 43.041 35.970 
  L 35.913 28.842 
  A 45 45 0 0 1 92.087 28.842 
  L 84.959 35.970 
  A 35 35 1 0 0 43.041 35.970" fill="#000000" />
</g>
<g transform="translate(0,128)rotate(-90)">
<path d="M 43.041 35.970 
  L 35.913 28.842 
  A 45 45 0 0 1 92.087 28.842 
  L 84.959 35.970 
  A 35 35 1 0 0 43.041 35.970" fill="#000000" />
</g>
<rect x="-1.383" y="58.673" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 64 154.5097)" width="130.766" height="10.655"/>
<rect x="-1.383" y="58.673" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -26.5097 64)" width="130.766" height="10.655"/>
</svg>

svgo压缩后的代码(我手动把viewBox加回去了,否则上传到iconfont会变形):

<svg x="0px" y="0px" width="128px" height="128px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M43.041 35.97l-7.128-7.128a45 45 0 0 1 56.174 0l-7.128 7.128a35 35 1 0 0-41.918 0M92.03 43.041l7.128-7.128a45 45 0 0 1 0 56.174l-7.128-7.128a35 35 0 0 0 0-41.918M84.959 92.03l7.128 7.128a45 45 0 0 1-56.174 0l7.128-7.128a35 35 0 0 0 41.918 0M35.97 84.959l-7.128 7.128a45 45 0 0 1 0-56.174l7.128 7.128a35 35 0 0 0 0 41.918"/><path d="M106.466 114L14 21.535l7.534-7.534L114 106.466z"/><path d="M14 106.466L106.465 14l7.534 7.534L21.534 114z"/></svg>

接着把需要的字符都上传到iconfont,然后把他们加入购物车,并点开购物车,下载代码。

下载回来的是一个压缩包,我们如果在小程序里用,可以采用推荐的“Font class”模式,复制iconfont.css到小程序,并只保留woff2那一段,其他可以参考里面的demo_index.html操作,页面上只需要一个span,指定样式便可使用,还可以自定义字体颜色(这个是关键,不然直接画个png图标,何必非那么大力气。。。),还可以设置字号,非常赞!

 <span class="mickey icon-mark-3" style="color:rgba(190, 0, 0);font-size: 64rpx;"></span>

 

微信小程序列表项的右侧带箭头怎么做

在.wxml文件中新增一个标签


<view class='list'>
  <view class='list1'>
    <image src='../../images/list.jpg'></image>
    <text>我的发布</text>
    <view class='arrow'></view>
  </view>
</view>

然后在.wxss中修饰

.arrow {
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  position: absolute;
  right: 20rpx;
  transform: rotate(45deg);
  margin-top: 10rpx;
}

原文链接:https://blog.csdn.net/qq_39702981/article/details/84286228

 

小程序slider多滑块

尊重劳动成果,转载请注明出处(https://blog.csdn.net/sllailcp/article/details/82595358)...

最近在用原生的代码开发小程序,需要用到多滑块的slider,但是官方的api只支持单滑块,所以就在原来的基础上草草的写了一个。有什么不足的地方还请大家多多指教,想封装成组件的也可自行封装,我这就不讲了。;

话不多说,上代码:

html:

<view class='sliderHCon'>
  <view class='showMoney'>
    <text class='MoneyValue'>¥{{leftShowValue}}</text>
    <text class='MoneyValue'>¥{{rightShowValue}}</text>
  </view>
 
  <view class='twoSlider'>
    <slider class='slider-left' min='{{Min}}' max='{{Max}}' value='{{leftValue}}' activeColor='#ccc' backgroundColor='#ccc' block-size='{{blockSize}}' step='{{step}}' bindchanging="leftChange" rightChange='leftChange'>
      <em class='slider-bg' style='left:{{setSliderLeftX}};width:{{setSliderWidthX}}'></em>
    </slider>
    <slider class='slider-right' min='{{Min}}' max='{{Max}}' value='{{rightValue}}' activeColor='#ccc' backgroundColor='#ccc' block-size='{{blockSize}}' step='{{step}}' bindchanging="rightChange" bindchange='rightChange'/>
  </view>
</view>
css
.sliderHCon {
  height: 250rpx;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
 
.MoneyValue {
  font-size: 30rpx;
  text-align: center;
  color: #999;
  margin-top: 15rpx;
}
 
.showMoney text {
  margin-right: 30rpx;
}
 
.twoSlider {
  width: 100%;
  height:100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
.slider-left,.slider-right{position: absolute;left:0;right:0;}
.slider-bg{position: absolute;top:50%;margin-top:-1px;left:0;width:100%;height:2px;background: blue;z-index: 9;}

js:

data: {
      blockSize:20,
      step:10,
      Min: 0, //最小值
      Max: 1000, //最大值
      leftValue: 0, //左边滑块默认值
      rightValue: 1000, //右边滑块默认值
      leftShowValue: 0, //界面显示左边滑块默认值
      rightShowValue: 1000, //界面显示右边滑块默认值
      leftWidth: '50', //左边滑块可滑动长度:百分比
      rightWidth: '50', //右边滑块可滑动长度:百分比
      sliderWidth:0, // slider的宽度;
      setSliderLeftX: 0, // 设置的sliderdiv的left
      setSliderWidthX: 0// 设置的sliderdiv的width
    },
 
onLoad(options) {
      var query = wx.createSelectorQuery(); // 如果是封装的组件的话,这边请注意写法不同哦;
      query.select('.slider-left').boundingClientRect((rect) => {        
        this.setData({
          sliderWidth: rect.width,
          setSliderLeftX: (rect.width / this.data.Max * this.data.leftValue) + this.data.blockSize/2 + 'px',
          setSliderWidthX: rect.width / this.data.Max * (this.data.rightValue - this.data.leftValue) - this.data.blockSize + 'px',
        })
        
      }).exec();
        
    },
 
 // 左边滑块滑动的值
  leftChange(e){
    
    var that = this;
    that.setData({
      leftValue: e.detail.value //设置左边当前值
    })
    this.setSliderBgColor(e,'left');
  },
  // 右边滑块滑动的值
  rightChange: function (e) {
    var that = this;
    that.setData({
      rightValue: e.detail.value,
    })
    this.setSliderBgColor(e, 'right');
  },
 
  setSliderBgColor(e, type){
      if (type == 'left') { // 左边
        if (this.data.leftValue < this.data.rightValue) {
          console.log('拖左不超右边');
          this.setData({ 
            leftShowValue: e.detail.value,
          })
          this.setData({ 
            rightShowValue: this.data.rightValue,
          })
        } else {
          console.log('拖左超右边');
          this.setData({ 
            leftShowValue: this.data.rightValue,
          })
          this.setData({ 
            rightShowValue: e.detail.value,
          })
        }
      } else { // 右边
        if (this.data.leftValue < this.data.rightValue) {
          console.log('拖右不超右边');
          this.setData({ 
            rightShowValue: e.detail.value,
          })
          this.setData({
            leftShowValue: this.data.leftValue,
          })
        } else {
          console.log('拖右超右边')
          this.setData({ 
            leftShowValue: e.detail.value,
          })
          this.setData({ 
            rightShowValue: this.data.leftValue,
          })
        }
      }
 
 
     const v = this.data.sliderWidth / this.data.Max 
      
      if (v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize >= 0) {
        this.setData({
          setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + 'px',
          setSliderWidthX: v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize + 'px',
        })
       // console.log(1)
      } else {
        this.setData({
          setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + 'px',
          setSliderWidthX: 0 + 'px',
        })
     
      }
    
   
  }

效果图如下(支持点击,拖动),觉得不错的,请给博主一个赞哦。:

--------------------- 本文来自 darkblueLove 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/sllailcp/article/details/82595358?utm_source=copy

微信小程序— slider(滑动选择器)

今天来介绍一下slider(滑动选择器):

官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html

1.效果图如下,

2.index.js中:

//index.js
//获取应用实例
const app = getApp()
var that;
var isDisabled = true;
Page({
  data: {
    //默认最小值20;
    min: 20,
    //默认最大值20;
    max: 100,
    //设置不禁用
    disabled: false,
    //设置选中默认颜色
    colorSelect: '#00ff00',
    //设置背景颜色
    backgroundColor: "#ccc",
    //设置滑块的大小
    blockSize: 28,
    //设置滑块的颜色
    blockColor: "#eeeeee",
    //是否显示当前 value
    showValue: true,
    //步长
    step: 5,
  },

  onLoad: function () {
    that = this;
  },
  //设置最小值
  minInput: function (e) {
    that.setData({
      min: e.detail.value,
    })
  },
  //设置最大值
  maxInput: function (e) {
    that.setData({
      max: e.detail.value,
    })
  },
  //设置是否禁用滑动
  btnDisabled: function (e) {
    if (isDisabled == true) {
      isDisabled = false;
      that.setData({
        disabled: true,
      })
    } else {
      isDisabled = true;
      that.setData({
        disabled: false,
      })
    }
  },
  //已选择的颜色
  colorSelectInput: function (e) {
    that.setData({
      colorSelect: e.detail.value,
    })
  },
  //设置背景条的颜色
  bgColorInput: function (e) {
    that.setData({
      backgroundColor: e.detail.value,
    })
  },
  //设置滑块的大小
  blockSizeInput: function (e) {
    that.setData({
      blockSize: e.detail.value,
    })
  },
  //设置步长,取值必须大于 0,并且可被(max - min)整除
  stepInput: function (e) {
    that.setData({
      step: e.detail.value,
    })
  },
  //设置滑块的颜色
  blockColorInput: function (e) {
    that.setData({
      blockColor: e.detail.value,
    })
  },
  //设置是否显示当前value
  btnshowValue: function () {
    that.setData({
      showValue: false,
    })
  },
  //完成一次拖动后触发的事件
  sliderchange: function (e) {
    wx.showToast({
      title: "拖动后触发" + e.detail.value,
      duration: 1000
    })
  },
  //拖动过程中的触发的事件
  bindchanging: function (e) {
    wx.showToast({
      title: "拖动中触发" + e.detail.value,
      duration: 1000
    })
  },
})

3.index.wxss中:

/*输入框样式  */

.section {
  width: 93%;
  margin: 20rpx;
  background-color: #ccc;
  padding: 10rpx;
  font-size: 30rpx;
  border-radius: 5px;
}

/*button样式  */

.button {
  width: 95%;
  margin: 20rpx;
}

4.index.wxml中:

<view class="section_gap">
  <text class="section__title">使用示例:</text>
  <view class="body-view">
    <slider bindchange="sliderchange" bindchanging="bindchanging" min="{{min}}" max="{{max}}" disabled="{{disabled}}" activeColor='{{colorSelect}}' backgroundColor='{{backgroundColor}}' block-size='{{blockSize}}' block-color='{{blockColor}}' step="{{step}}" show-value='{{showValue}}'/>
  </view>
</view>

<view class="section">
  <input placeholder="设置最小值,默认为20" type="number" bindinput="minInput" confirm-type="done" focus/>
</view>

<view class="section">
  <input placeholder="设置最大值,默认为100" type="number" bindinput="maxInput" confirm-type="done" focus/>
</view>

<view>
  <view class='text'>设置已选择的颜色(请使用十六进制颜色值,例如:#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="colorSelectInput" confirm-type="done" focus/>
</view>

<view>
  <view class='text'>设置背景条的颜色(请使用十六进制颜色值,例如:#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="bgColorInput" confirm-type="done" focus/>
</view>

<view>
  <view class='text'>设置滑块的颜色(请使用十六进制颜色值,例如:#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="blockColorInput" confirm-type="done" focus/>
</view>

<view class="section">
  <input placeholder="设置滑块的大小,取值范围为12 - 28" type="number" bindinput="blockSizeInput" confirm-type="done" focus/>
</view>

<view class="section">
  <input placeholder="步长,取值必须大于 0,并且可被(max - min)整除" type="number" bindinput="stepInput" confirm-type="done" focus/>
</view>

<button class='button' catchtap='btnDisabled'>设置/取消禁用</button>
<button class='button' catchtap='btnshowValue'>隐藏当前value</button>
  •  

--------------------- 本文来自 Afanbaby 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/afanbaby/article/details/79206852?utm_source=copy