上次小程序（2）

简单的image的应用和设置

wxml:

<!--pages/images/images.wxml-->

<text>image的简单设置</text>
<view class="boxview" hover-class="boxhover">
    <image src="/pictures/中枢.png" class="box"></image>
</view>
<!-- 插入图片并且加入点击属性（放到view中去实现） -->

<text>image的mode设置</text>
<image src="/pictures/流量.png" mode="left" show-menu-by-longpress> </image>
<!-- 图片的 mode 功能（大部分是关于排位置、缩放和裁切的） -->

<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx2.sinaimg.cn%2Fmw690%2F003vnCbrly1gvn023op1tj60ch074dgk02.jpg&refer=http%3A%2F%2Fwx2.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637403554&t=ad87d834f512c9384996503211ca8d20" mode="aspectFit"></image>
<!-- 也支持从网上链接抓取图片 -->

wxss:

/* pages/images/images.wxss */

.box{width: 100px;height: 100px;}
.boxhover{background-color: brown;width: 100px;height: 100px;}
.mode{height: 100px;width: 100px;}
/* 
可以设置宽度时直接设置为100%
即为拉成百分百了
*/

结果图：

关于navigator的使用：

记得里面用到的是url跳转，而非image里src

 WXML:

<!--pages/navigator/navigator.wxml-->
<text >navigator导航</text>
<view>
    <navigator class="naviv" url="/pages/images/images">image模块</navigator>
</view>
<!-- 不能把navigator放到text中去，因为他也是个模块 -->

<navigator class="navit" url="/pages/logs/logs" open-type="reLaunch">logs</navigator>
<!-- 可以通过 open-type来改变打开方式 -->

<!-- 另外一个，假如说导航栏里面有了对某个页面的导航，那么从其他页面无法访问当前页面（导航设置后无响应） -->

 WXSS:

/* pages/navigator/navigator.wxss */
.naviv{width: 100px;height: 100px;background-color: aquamarine;}
.navit{width: 100px;height: 100px;background-color: rgb(194, 21, 50);}

结果： 

 由于open-type的不同跳转不同页面后：

     

 区别于左上角的 返回 

进度：