【Kevin Learn 小程序】--＞List
2024-05-10 18:59:43
效果图
代码
- app.js
//app.js
App({onLaunch: function () {console.log('App Launch')},onShow: function () {console.log('App Show')},onHide: function () {console.log('App Hide')},globalData: {hasLogin: false}
})
- app.json(小技巧：pages/list/list 点击保存，会自动在 pages 文件夹下创建 list 相应的文件)
{"pages": ["pages/list/list","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}
- list.js
var base64 = require("../images/base64");
Page({onLoad: function () {this.setData({icon: base64.icon20});}
});
- list.wxml
<view class="page"><view class="page__hd"><view class="page__title">List</view><view class="page__desc">列表</view></view><view class="page__bd"><view class="weui-cells__title">带说明的列表项</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view></view><view class="weui-cells__title">带图标、说明的列表项</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__hd"><image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view><view class="weui-cell"><view class="weui-cell__hd"><image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view></view><view class="weui-cells__title">带跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator></view><view class="weui-cells__title">带说明、跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator></view><view class="weui-cells__title">带图标、说明、跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__hd"><image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__hd"><image src="{{icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator></view></view>
</view>
【Kevin Learn 小程序】--＞List相关推荐
- 【Kevin Learn 小程序】--＞ dialog
效果图 实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: function () {c ...
- 【Kevin Learn 小程序】--＞video
效果图 属性 参考:video 实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: fu ...
- 【Kevin Learn 小程序】--＞camera
效果图 属性 参考:camera 实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: f ...
- 【Kevin Learn 小程序】--＞picker
效果图 属性 参考:picker 代码 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: f ...
- 【Kevin Learn 小程序】--＞picker-view
效果图 属性 参考:picker-view 代码 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onSh ...
- 《产品之光》作者Kevin：对于小程序我有话要说
嘉宾介绍 Kevin,自媒体人,<产品之光>作者.简书签约作者.前腾讯医疗碳云智能oss产品负责人.前喜马拉雅高级产品经理,裂变0元冷启动数十个百人产品社群,0成本落地上百场产品沙龙,北上 ...
- java游戏小程序_javaCode 158个经典小程序,里面包含各种小游戏代码，能提高初学者 趣，同事可以从中学习 Games 246万源代码下载- www.pudn.com...
文件名称: javaCode下载 收藏√ [ 5 4 3 2 1 ] 所属分类: Games 开发工具: Java 文件大小: 543 KB 上传时间: 2015-10-25 下载次数: ...
- 慕课网：SpringBoot+MyBatis搭建迷你小程序
相关截图 后端程序与小程序项目目录截图 效果截图 可参考资料 小项目视频教程:https://www.imooc.com/learn/945 小项目源码:https://github.com/zche ...
- 小程序 graphql_GraphQL应用程序中的五个常见问题（以及如何解决）
小程序 graphql by Sacha Greif 由Sacha Greif GraphQL应用程序中的五个常见问题(以及如何解决) (Five Common Problems in GraphQL ...
最新文章
- 用Python在Windows或Linux下批量删除文件夹中指定的文件
- Java 锁粗化与循环
- hibernate延迟加载lazy的原理，以及为什么session关闭会报错
- bzoj1072: [SCOI2007]排列perm
- HDU 2152 选课时间(题目已修改,注意读题) (母函数)
- Spring Boot的事务管理注解@EnableTransactionManagement的使用
- 【C语言】第五章 迭代计算与循环结构 题解
- IDEA Maven项目添加本地jar包
- Oracle 权限管理
- web绿色服务器单文件,Web个人临时共享服务器
- linux 搭建技术博客,Linux NTP服务器搭建精讲
- 小学听课计算机笔记范文,小学数学听课笔记 小学数学听课记录范文
- VS在新建或者导入项目时出现“不支持此接口(Exception from HRESULT:0x80004002 (E_NONINTERFACE))”的解决办法
- html中加号实体,纯css实现加号“+”效果（代码示例）
- 系统之家U盘 win10返回桌面快捷键是什么
- 一则有意思的产品小故事
- B BL BLX BX详解
- P3625 [APIO2009]采油区域 题解
- uniapp的原生tabbar图片加载不出来
- LeetCode知识点总结 - 844