微信小程序第一次培训

最新推荐文章于 2024-09-26 17:21:31 发布

某科学的初学者

最新推荐文章于 2024-09-26 17:21:31 发布

阅读量408

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_61507413/article/details/122926146

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML/CSS/JavaScript在微信小程序中的应用，配合滚动视图组件，展示了一个源码实例，包括hover效果和导航链接。同时涵盖了Vue、React等前端框架的使用和图片布局技巧。

摘要由CSDN通过智能技术生成

源码：

<view class="box" hover-class= "boxHover">
  <view class="item" hover-class="itemHover" hover-stop-propagation>1111</view>
</view>
 
<view class="out">
  <text>新视觉实训基地</text>
  <text>微信小程序课程</text>
</view>

<view class="out">
  <text>新视觉实训基地</text>
  <text>微信<text decode> &nbsp; &lt; </text>小程序课程</text>
</view>

<scroll-view scroll-x>
  <view class="scrOut">
    <view class="scrBox">111</view>
    <view class="scrBox">222</view>
    <view class="scrBox">333</view>
    <view class="scrBox">444</view>
    <view class="scrBox">555</view>
  </view>
</scroll-view>

<scroll-view class="scroll2" scroll-y  scroll-top="150">
  <view class="scrOut2">
    <view class="scrBox2">111</view>
    <view class="scrBox2">222</view>
    <view class="scrBox2">333</view>
    <view class="scrBox2">444</view>
    <view class="scrBox2">555</view>
  </view>
</scroll-view>

<view>
  <navigator class="link" url="/pages/logs/logs" open-type="reLaunch">跳转到日志</navigator>
  <navigator class="link" url="/pages/logs/logs">跳转到日志</navigator> 
</view>


<image src="http://www.qingnian8.com/images/hot1.jpg" ></image>
<image class="img1" src="/images/img4.jpg" mode= "bottom right" ></image>
<image src="/images/img1.jpg" show-menu-by-longpress></image>
<image src=" /images/img3.jpg" mode= "widthFix" ></image>


<text selectable space="ensp">新视觉实训基地新视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地视觉实训基地</text>
<view>微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小微信小程字开发徽信小程序开发</view>

.box{ width: 100px; height: 100px;background: red;}
.boxHover{ background: yellowgreen;}

.item{ width: 50px; height: 50px; background: gold;}
.itemHover{ background:  hotpink; }

/* .out view{color:blue; display: inline;} */

image{width:100%;}
.link{ height: 40px;}
.scrOut{ border:1px solid green; display: flex;flex-wrap: nowrap;}
.scrBox{ width:100px; height: 100px; background: gold ; margin-right: 2px;flex:0 0 100px;}

.scroll2{ height: 450px;}
.scrBox2{ width:100%; height: 100px; background: pink ; margin-bottom: 1px;}