结合ColorUI组件开发微信小程序

1.自定义组件生命周期函数:
Component({
  data: {


  },


  attached() {
    console.log("自定义组件生命周期函数 attached--先执行");
    this.getPos();
  },


  ready() {
    console.log("ready生命周期函数---在attached之后执行")
  },


  methods: {
    getPos() {
      var that = this;
      console.log("ssss")
      wx.getLocation({
        type: "wgs84",
        isHighAccuracy: true,
        success: function (res) {
          console.log('纬度' + res.latitude);
          console.log('经度' + res.longitude);
          that.setData({
            latitude: res.latitude,
            longitude: res.longitude,
          })
        }
      })
    }
  }
})

2.使用ColorUI定义的列表样式:
<view class="cu-list menu">
      <view class="cu-item">
        <view class="content">
          <text class="cuIcon-locationfill text-grey"></text>
          <text class="text-black">地址</text>
          <text class="text-grey text-xs detailPos">详细地址</text>
        </view>
      </view>
 </view>

3.使用ColorUI定义的图标样式:
<text class="cuIcon-locationfill text-grey"></text>
4.可上下滚动的列表:
(1).wxml:
  <view class="posList">

    <scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
      <view class="cu-list menu">
        <view class="cu-item" wx:for="{{itemsPos}}" wx:for-item="item" wx:key="index">
          <view class="content">
            <text class="cuIcon-locationfill text-grey"></text>
            <text class="text-black">{{item.pos}}</text>
            <text class="text-grey text-xs detailPos">{{item.detailPos}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

(2).js文件:
  
scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },


  upper(e) {
    // console.log(e)
  },


  lower(e) {
    // console.log(e)
  },


  scroll(e) {
    // console.log(e)
  },
  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },


  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  },

(3).wsxx文件:
.posList {
  position: fixed;
  left: 0%;
  top: 16%;
  width: 100%;
  height: 90%;
  background-color: rgb(215, 253, 0);
}


.scroll-view_H {
  white-space: nowrap;
}


.scroll-view-item {
  height: 100%;
}


.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 100%;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/229919.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

macOS Big Sur/Mac电脑安装vscode显示您没有权限来打开应用程序‘Visual Studio Code‘ 请联系您的电脑或网络管理员问题修复

错误方法 首先我以为我的权限不足。&#xff0c;需要去用户群组里设置。结果根本不是这个的问题。 1.在系统偏好设置->用户与群组检查了一下我的用户是不是管理员 结果发现是管理员 2.根据苹果提示&#xff0c;右键我的文件夹->显示简介->最下面的共享与权限 解锁&…

【Linux】进程间通信之管道--命名管道匿名管道通信进程池设计

文章目录 一、进程间通信介绍1.什么是通信2.为什么要有通信以及如何进行通信 二、管道1.什么是管道2.匿名管道2.1什么是匿名管道2.2接口认识--pipe2.3进程间通信之匿名管道实现2.4读写特征2.5管道的特征2.6 进程池设计 3.命名管道3.1创建一个命名管道3.2用命名管道实现server&a…

大数据技术3:数据仓库的ETL和分层模型

前言&#xff1a;我们先了解一下数据仓库架构的演变过程。 1 、数据仓库定义 数据仓库是一个面向主题的&#xff08;Subject Oriented&#xff09;、集成的&#xff08;Integrate&#xff09;、相对稳定的&#xff08;Non-Volatile&#xff09;、反映历史变化&#xff08;Time…

3GPP标准查看、下载和几个UE相关系列标准

由于一直做终端侧协议。最近以UE为核心重新下载了一系列文档。 总结并举例一下分类标准。 如何查看3GPP标准列表 实际上在3GPP网站如下链接&#xff1a;Specifications by Series&#xff0c;每个系列以及分类都说的很清楚。 几个系列分类举例 和终端协议层工作比较关系密切…

鸿蒙OS应用开发之最简单的程序

鸿蒙OS应用开发之最简单的程序 前面介绍怎么样安装鸿蒙应用开发的环境&#xff0c;然后试着运行起来&#xff0c;并安装运行的虚拟机&#xff0c;以及对应9.0版本的API和SDK等软件。这样就具备了基本的开发基础&#xff0c;就可以进入创建应用程序开发了。 在我们起飞之前&…

Navicat 技术指引 | 适用于 GaussDB 分布式的日志查询与配置设置

Navicat Premium&#xff08;16.3.3 Windows 版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结…

c/c++中一些不常用但有用的知识

1.变长数组 bool fun(int cnt) {unsigned char data[cnt];return true; } 在 C 语言中&#xff0c;变长数组&#xff08;Variable Length Arrays&#xff0c;VLA&#xff09;是 C99 标准引入的特性&#xff0c;允许使用变量来定义数组的长度。因此&#xff0c;在 C 版本的代码…

遥测终端机RTU:实现远程监测和控制的重要工具

遥测终端机RTU对设备进行远程监测和控制&#xff0c;支持采集和传输数据&#xff0c;以实现对工业过程、公用事业、水文和环境的监测和管理。 遥测终端机RTU工作原理 计讯物联遥测终端机RTU通过网口、串口进行传感器/设备等现场数据采集&#xff0c;将其转换为数字信号&#xf…

数据库字段名和sql关键字冲突报错解决方法

1、修改实体类字段映射。注解里加反引号 2、sql字段上加反引号 3、问题解决

Flink 使用场景

Apache Flink 功能强大&#xff0c;支持开发和运行多种不同种类的应用程序。它的主要特性包括&#xff1a;批流一体化、精密的状态管理、事件时间支持以及精确一次的状态一致性保障等。Flink 不仅可以运行在包括 YARN、 Mesos、K8s 在内的多种资源管理框架上&#xff0c;还支持…

中东电商指南分享!盘点中东四大跨境电商平台

提到跨境电商新蓝海&#xff0c;就不得不想起土豪聚集地 ——中东&#xff0c;中东地区拥有庞大的人口、高人均GDP、强大的消费能力以及广泛普及的互联网&#xff0c;但外出购物却相对不便&#xff0c;正是这一特点为中东跨境电商市场创造了巨大的优势。随着中东地区电商的崛起…

无人机自主巡检是什么?如何实现自动巡检?

近年来&#xff0c;随着科技不断演进&#xff0c;无人机自主巡检技术在多个领域取得显著进展。那么&#xff0c;无人机自主巡检到底是什么&#xff1f;它又是如何实现自动化的呢&#xff1f; 一、无人机自主巡检的定义 无人机自主巡检技术是利用无人机对目标对象或区域进行巡检…

IntelliJ idea卡顿解决,我遇到的比较管用的方案

Setttings> Build, Execution,Deployment>Debugger> Data Views> Java 取消 Enable "toString()" object view; Speed up debugging in IntelliJ Yesterday, I observed painfully slow debugging in IntelliJ. Every step over or step in took almost…

信息解码(Message Decoding, ACM/ICPC World Finals 1991, UVa 213)

考虑下面的01串序列&#xff1a; 0, 00, 01, 10, 000, 001, 010, 011, 100, 101, 110, 0000, 0001, …, 1101, 1110, 00000, … 首先是长度为1的串&#xff0c;然后是长度为2的串&#xff0c;依此类推。如果看成二进制&#xff0c;相同长度的后 一个串等于前一个串加1。注意上述…

【latex笔记】双栏格式下插入单栏、双栏格式图片

双栏格式下插入单栏、双栏格式图片 1.缘起multicols2.双栏格式 插入单栏图片3.双栏格式 插入双栏图片 1.缘起multicols 插入双栏格式图片问题被困扰了有很长一段时间&#xff0c;查看网络资源也一直没找到解决方法&#xff0c;今天查看Latex官方文档&#xff0c;才发现因为mul…

AGI 时代,小红书邀您一起复盘年度 100 件值得学习的好案例

2023 年&#xff0c;由 ChatGPT 引爆新一轮人工智能热潮&#xff0c;开启了由大模型驱动的 AGI 时代。随着 AIGC 的快速崛起&#xff0c;传统的研发模式是否会被 AI 颠覆也成为了巨大的未知数。面对不同规模团队与不同业务场景&#xff0c;企业想要找到可靠、可行、可落地的转型…

CLion手把手教你创建Windows项目

作为一个Jetbrains迷的我&#xff0c;下载了Jetbrains全家桶&#xff0c;我就想用CLion 编写 Windows 项目 前提&#xff1a;必须安装 Visual Studio 2022 New Project 选择 C Executable&#xff0c;取好项目名&#xff0c; 点击 Create 在 CMakeList.txt 中添加以下内容&…

期末速成数据库极简版【创建】(1)

目录 前言 【1】T-SQL语句创建数据库 【2】T-SQL语句删除数据库 【3】T-SQL语句创建表 完整性约束 数据类型 例子 【4】T-SQL语句修改表 【5】T-SQL语句删除表 关于数据库&#xff0c;在我们学习Linux网络编程后面会详细学习到&#xff0c;为了应付期末考试&#xff0…

解决删除文件后 WSL2 磁盘空间不释放的问题

查看 Linux distributions 打开 PowerShell 并执行如下命令&#xff1a; wsl -l -v 搜索并找到 ext4.vhdx 文件 我的 ext4.vhdx 文件如下&#xff1a; C:\Users\xxx\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu22.04LTS_79rhkp1fndgsc\LocalState\ext4.vhdx 由于…

从初级测试工程师到高级测试岗进阶指南,一文带你不迷路...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 说到软件测试工程…