微信小程序的应用-渲染影院页面

最新推荐文章于 2024-07-31 09:42:55 发布

牛马小龙

最新推荐文章于 2024-07-31 09:42:55 发布

阅读量365

点赞数

文章标签：微信小程序 elementui 小程序

本文链接：https://blog.csdn.net/m0_65769258/article/details/123094374

版权

本文介绍了如何使用微信小程序创建影院页面，包括将静态页面转换并导入样式，利用wx.getLocation获取经纬度（虽未实际使用），使用组件库Vant Weapp设计下拉选择城市组件，以及处理异步事件确保数据正确加载。此外，还讨论了页面动态加载更多数据的实现。

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

//cinema.wxml

<van-dropdown-menu>
    <van-dropdown-item value="{
  { value1 }}" options="{
  { option1 }}" bind:change='select' />

</van-dropdown-menu>
<view class="bigbox">
    <view class="bc-fff main" wx:for="{
  {list}}" wx:key="cinemaId">
        <view class="first">
            <view class="flex jc-sb">
                <text>{
  {item.name}}</text>
                <text class="f14 base"> ¥{
  {item.lowPrice}} <text class="f12">元起</text> </text>
            </view>
            <view class="f14 flex jc-sb mt-5">
                <text>{
  {item.address}}</text>
                <text>{
  {item.distance}}</text>
            </view>
            <view class="f12 mt-5">
                <text class="box1">退</text>
                <text class="box1 ml-5">改签</text>
                <text class="box2 ml-5">小吃</text>
                <text class="box2 ml-5">折扣卡</text>
            </view>
            <view class="mt-5 flex ai-c">
                <image src="../../img/ka.png" alt="1"></image>
                <text class="f14 text1">开卡特惠，首单1张最高立减4元</text>
            </view>
        </view>
    </view>
</view>
<view class="flex ai-c jc-c" wx:if="{
  {show}}">加载完毕，没有更多了</view>

//cinema.wxss

.head {
    height: 46px;
    top: 0;
  }
  .head .left,
  .head .right {
    width: 60px;
  }
  .head image {
    height: 20px;
    width: 20px;

  }
  .bigbox {
  
    margin-bottom: 60px;
  }
  .main {
    border-bottom: 1px solid #f5f5f5;
  }
  .main .first {
    padding: 15px;
  }
  .main .first .box1 {
    border: 1px solid #589daf;
    color: #589daf;
    padding: 0px 5px;
  }
  .main .first .box2 {
    border: 1px solid #ff9900;
    color: #ff9900;
    padding: 0px 5px;
  }
  .main .first image {
    width: 15px;
    height: 15px;
  }
  .main .first .text1 {
    color: #999;
    
  }
  footer {
    bottom: 0px;
    height: 50px;
  }

//app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
/* 公共样式 */

/* body的背景颜色 */
body {
  background-color: rgb(244, 244, 244);
  font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helv