结合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%;
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

应用架构——集群、分布式、微服务的概念及异同

一、什么是集群&#xff1f; 集群是指将多台服务器集中在一起&#xff0c; 每台服务器都实现相同的业务&#xff0c;做相同的事&#xff1b;但是每台服务器并不是缺 一不可&#xff0c;存在的主要作用是缓解并发能力和单点故障转移问题。 集群主要具有以下特征&#xff1a; …

数据结构与算法(二)分治算法(Java)

目录 一、简介1.1 背景1.2 定义1.3 步骤1.4 时间复杂度 二、经典示例2.1 二分搜索2.2 快速排序2.3 归并排序&#xff08;逆序数&#xff09;2.4 最大子序列和 一、简介 1.1 背景 在学习分治算法之前&#xff0c;我们先来举一个例子。 假如你有一个存钱罐&#xff0c;过年家人…

【mysql】事物与隔离级别

事物 事务(Transaction)是并发控制的基本单位。所谓的事务呢&#xff0c;它是一个操作序列&#xff0c;这些操作要么都执行&#xff0c;要么都不执行&#xff0c;它是一个不可分割的工作单位。 事务具有四大特性&#xff0c;通常称为ACID特性&#xff1a; 原子性&#xff08…

microblaze仿真

verdivcs (1) vlogan/vcs增加编译选项 -debug_accessall -kdb -lca (2) 在 simulation 选项中加入下面三个选项 -guiverdi UVM_VERDI_TRACE"UVM_AWARERALHIERCOMPWAVE" UVM_TR_RECORD 这里 -guiverdi是启动verdi 和vcs联合仿真。UVM_VERDI_TRACE 这里是记录 U…

mybatis数据输出-insert操作时获取自增列的值给对应的属性赋值

jdbc-修改 水果库存系统的 BaseDao 的 executeUpdate 方法支持返回自增列-CSDN博客 1、建库建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSE…

【Linux系统化学习】命令行参数 | 环境变量的再次理解

个人主页点击直达&#xff1a;小白不是程序媛 Linux专栏&#xff1a;Linux系统化学习 代码仓库&#xff1a;Gitee 目录 mian函数传参获取环境变量 手动添加环境变量 导出环境变量 environ获取环境变量 本地变量和环境变量的区别 Linux的命令分类 常规命令 内建命令 …

2024黑龙江省职业院校技能大赛信息安全管理与评估样题第二三阶段

2024黑龙江省职业院校技能大赛暨国赛选拔赛 "信息安全管理与评估"样题 *第二阶段竞赛项目试题* 本文件为信息安全管理与评估项目竞赛-第二阶段试题&#xff0c;第二阶段内容包括&#xff1a;网络安全事件响应、数字取证调查和应用程序安全。 极安云科专注技能竞赛…

我的创作纪念日——多线程进阶分享

多线程-进阶 1. 锁的策略 1.1 乐观锁&悲观锁 乐观锁 预计在线程中数据大概率不会被其他线程拿去修改 对于加锁所作的准备较少。只有当修改的操作真正发生了&#xff0c;才会进行加锁操作 所以乐观锁适用于多读少写的情况&#xff0c;可以降低加锁频率&#xff0c;提升效…

28. Python Web 编程:Django 基础教程

目录 安装使用创建项目启动服务器创建数据库创建应用创建模型设计路由设计视图设计模版 安装使用 Django 项目主页&#xff1a;https://www.djangoproject.com 访问官网 https://www.djangoproject.com/download/ 或者 https://github.com/django/django Windows 按住winR 输…

Markdown从入门到精通

Markdown从入门到精通 文章目录 Markdown从入门到精通前言一、Markdown是什么二、Markdown优点三、Markdown的基本语法3.1 标题3.2 字体3.3 换行3.4 引用3.5 链接3.6 图片3.7 列表3.8 分割线3.9 删除线3.10 下划线3.11 代码块3.12 表格3.13 脚注3.14 特殊符号 四、Markdown的高…

【科学炼丹指南】机器学习最科学、最有效的参数优化全流程实现方法

机器学习模型都有很多超参数需要调整,比如神经网络的层数、节点数,树模型的最大深度、叶子节点数等。调参的目的是在限定的训练时间和计算资源内,通过调整这些超参数,使模型在验证集上的性能指标达到最优,如最小化预测误差,最大化准确率等。 但是由于超参数组合数量极大,模式性…

探索无监督域自适应,释放语言模型的力量:基于检索增强的情境学习实现知识迁移...

深度学习自然语言处理 原创作者: Xnhyacinth 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;如何有效地进行无监督域自适应(Unsupervised Domain Adaptation, UDA) 一直是研究的热点和挑战。无监督域自适应的目标是在目标域无标签的情况下&#xff0c;将源域的知识…